跳转到内容

按钮 Button

按钮分为 primary - 主要按钮secondary - 次要按钮(默认)dashed - 虚线按钮outline - 线形按钮text - 文本按钮五种类型。

按钮的禁用状态。

通过 <sd-button-group> 组件使按钮以组合方式出现。可用在同级多项操作中。

按钮可以嵌入图标。在只设置图标时,按钮的宽高相等。

通过设置 loading 可以让按钮处于加载中状态。处于加载中状态的按钮不会触发点击事件。

通过设置 long 属性,使按钮的宽度跟随容器的宽度。

按钮分为 square - 长方形(默认)circle - 圆形round - 全圆角三种形状。

按钮分为 minismallmediumlarge 四种尺寸。高度分别为:24px28px32px36px。推荐(默认)尺寸为 medium。可在不同场景及不同业务需求选择适合尺寸。

按钮的状态分为 normal - 正常(默认)success - 成功warning - 警告danger - 危险四种,可以与按钮类型同时使用。

参数名描述类型默认值
type按钮的类型,分为五种:次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮。ButtonTypes'secondary'
shape按钮的形状BorderShape-
status按钮的状态'normal' | 'warning' | 'success' | 'danger''normal'
size按钮的尺寸'mini' | 'small' | 'medium' | 'large''medium'
long按钮的宽度是否随容器自适应。booleanfalse
loading按钮是否为加载中状态booleanfalse
disabled按钮是否禁用booleanfalse
html-type设置 button 的原生 type 属性,可选值参考 HTML标准HTMLButtonElement['type']'button'
autofocus设置 button 的原生 autofocus 属性,可选值参考 HTML标准booleanfalse
href设置跳转链接。设置此属性时,按钮渲染为a标签。string-
事件名描述参数
click点击按钮时触发ev: MouseEvent
插槽名描述参数
icon图标-
参数名描述类型默认值
type按钮的类型,分为五种:次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮。ButtonTypes-
status按钮的状态'normal' | 'warning' | 'success' | 'danger'-
shape按钮的形状BorderShape-
size按钮的尺寸'mini' | 'small' | 'medium' | 'large'-
disabled全部子按钮是否禁用booleanfalse