Button 按钮

点击按钮即可执行操作,或做出选择。

1.按钮类型

按钮有六种类型:主按钮、次按钮、虚线按钮、文本按钮、链接按钮和普通按钮。

  • 主按钮:用于主行动点,一个操作区域只能有一个主按钮。
  • 次按钮(默认):用于没有主次之分的一组行动点。
  • 虚线按钮:常用于添加操作。
  • 文本按钮:用于最次级的行动点。
  • 链接按钮:一般用于链接,即导航至某位置。
  • 普通按钮:和普通文本搭配使用,纯文本,不占据多余空间,例如用于表格。
2.颜色

预置四种颜色:默认、成功、警告、危险。

危险:删除/移动/修改权限等危险操作,一般需要二次确认。

3.形状

预置三种形状:默认、圆角、圆形。

4.尺寸

预置三种尺寸:大号、中号(默认)、小号。

5.带图标的按钮

图标可以放入 icon 插槽,并可以使用 icon-placement 指定位置。

6.幽灵按钮

幽灵按钮将按钮的内容反色,背景变为透明,常用在有色背景上。

7.禁用状态

添加 disabled 属性即可让按钮处于禁用状态,同时按钮样式也会改变,不可用的时候,一般需要文案解释。

8.加载状态

添加 loading 属性即可让按钮处于加载状态,用于异步操作等待反馈的时候,也可以避免多次提交。

9.块级

block 属性将使按钮占据父元素宽度。

10.按钮组

可以把几个按钮结合成按钮组。

11.超长内容

超长内容自动截断并省略,不撑开页面。