按钮

示例

按钮类型

有如下几种类型:默认按钮,主按钮,警告按钮,危险按钮,成功按钮,文字按钮。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)


纵向按钮组



radio按钮组

checkbox按钮组

按钮组

Button作为ButtonGroup的子元素,可以展示按钮组。给ButtonGroup添加vertical属性,可以是按钮组纵向排列。给ButtonGroup添加checkType属性,可以使按钮组拥有单选或复选能力。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
图标按钮

Button添加icon属性,可以展示图标按钮。图标按钮仅仅是使按钮的宽高相等,此时你可以将任意图标元素作为它的子元素。circle属性可以展示圆形图标。如果你不需要宽高相等的图标按钮,而仅仅是带图标的文字按钮,去掉icon属性即可。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)


加载状态按钮

添加loading属性,可以将按钮设为加载状态,此时按钮不可点。

请给图标元素添加k-icon类名,或者使用Icon组件,用于定位图标元素,以便按钮变为loading状态时能够将它替换为loading图标

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)


按钮尺寸

通过size属性可以指定按钮的尺寸:large, default,small, mini

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
禁用状态

添加disabled属性,可以禁用按钮

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
div元素按钮
disabled div button
超链接按钮
指定按钮tagName

Button默认渲染成button元素,通过tagName,我们可以渲染成任意元素或组件。此时,我们可以通过tagProps属性,给指定的tagName传递与Button属性名相冲突的属性。

当给Button指定href属性时,则它会强制渲染成a标签

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

属性

Button

属性 说明 类型 默认值
type 按钮类型 "default" | "primary" | "warning" | "danger" | "success" | "none" "default"
size 按钮尺寸 "default" | "small" | "mini" "default"
icon 是否为图标按钮(宽高相等) Boolean false
circle 是否为圆角按钮 Boolean false
loading 是否为正在加载中的按钮 Boolean false
disabled 是否禁用状态 Boolean false
fluid 是否宽度100% Boolean false
htmlType 按钮<button>元素的type String "button"
tagName 按钮渲染后的实际html元素,例如我们可以传入"a"来渲染成超链接 String button
tagProps 当指定tagName时,该属性将传给tagName指定的元素 Object undefind
value 对于radio类型的按钮组,我们可以给每个按钮指定一个选中时的值 * undefined
name 对于radio类型的按钮组,我们给radio指定name属性 String undefined

ButtonGroup

属性 说明 类型 默认值
vertical 是否垂直排列按钮组 Boolean false
checkType 指定按钮组为单选或复选类型,此时需要给每个按钮指定value来作为选中的值 "radio" | "checkbox" | "none" "none"
value 对于radiocheckbox类型按钮组,该值表示选中的按钮的值,可以使用v-model进行双向绑定 * undefined

方法

Button

方法名 说明 参数 返回值
showLoading 展示loading状态 - undefined
hideLoading 取消loading状态 - undefined
disable 禁用按钮 - undefined
enable 启用按钮 - undefined