Material You

Common buttons 通用按钮

按钮传达用户可以采取的操作。它们通常被放置在整个 UI 中，如

  • Dialogs
  • Modal windows
  • Forms
  • Cards
  • Toolbars

使用

类型

Material you 提供了五种常见按钮。

  1. Elevated button
  2. Filled button
  3. Filled tonal button
  4. Outlined button
  5. Text button

在模板中：

<template>
    <m-button type="elevated">Confirm</m-button>
    <m-button type="filled">Confirm</m-button>
    <m-button type="filled-tonal">Enabled</m-button>
    <m-button type="outlined">Confirm</m-button>
    <m-button type="text">Enabled</m-button>
</template>

type 参数默认为 filled

添加图标

下面的示例显示带有图标的 elevated button 与 text button。

在模板中：

<template>
    <m-button type="elevated" icon="add">Elevated button</m-button>
</template>

禁用状态

通过添加disabled属性改变按钮的禁用状态。

在模板中：

<template>
    <m-button type="elevated" disabled>Confirm</m-button>
    <m-button type="filled" disabled>Confirm</m-button>
    <m-button type="filled-tonal" disabled>Enabled</m-button>
    <m-button type="outlined" disabled>Confirm</m-button>
    <m-button type="text" disabled>Enabled</m-button>
</template>

禁用涟漪效果

可以设置ripple属性为false来禁用按钮的涟漪效果。

在 Material you 设计中，建议 pc 端关闭按钮的涟漪效果。

长按钮

为按钮设置long属性，可让按钮宽度占满容器。

API

属性

参数说明类型默认值
type按钮的类型'elevated' | 'filled' | 'filled-tonal' |'outlined' | 'text'fill
disabled按钮是否禁用booleanfalse
icon按钮的图标stringnull
iconFill按钮图标是否填充booleanfalse
ripple是否使用涟漪效果booleantrue

事件

事件名说明参数
click点击按钮时触发event: Event
touchstart触摸手指压下按钮时触发event: Event

插槽

插槽名说明参数
default按钮内容-