Button 按钮
常用的操作按钮。
基础用法
使用type
、plain
、round
和circle
属性来定义 Button 的样式。
禁用状态
你可以使用 disabled
属性来定义按钮是否被禁用。
使用 disabled
属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean
类型的值。
链接按钮
文字按钮
没有边框和背景色的按钮。
图标按钮
使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。
按钮组
以按钮组的方式出现,常用于多项类似操作。使用<swc-button-group>
标签来嵌套你的按钮。
加载中
点击按钮来加载数据,并向用户反馈加载状态。
通过设置 loading
属性为 true
来显示加载中状态。
调整尺寸
除了默认的大小,按钮组件还提供了几种额外的尺寸可供选择,以便适配不同的场景。
使用 size
属性额外配置尺寸,可使用 large
和 small
两种值
Button 属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
size | 尺寸 | string | large / default / small | default |
type | 类型 | string | primary / success / warning / danger / info | — |
text | 是否文字按钮 | boolean | — | false |
plain | 是否朴素按钮 | boolean | — | false |
round | 是否圆角按钮 | boolean | — | false |
circle | 是否圆形按钮 | boolean | — | false |
loading | 是否加载中状态 | boolean | — | false |
disabled | 是否禁用状态 | boolean | — | false |
icon | 图标类名 | string | — | — |
Button 插槽
插槽名 | 说明 | 子标签 |
---|---|---|
default | 自定义默认内容 | Button |
loading | 自定义加载中组件 | - |
icon | 自定义图标组件 | - |