按钮设计

基本使用

一个普通的按钮

按钮类型 type

按钮有五种类型：主按钮、透明按钮、虚线按钮、文本按钮和链接按钮

• default 默认按钮，有边框，有点击效果
• clear 透明按钮，无背景，有边框，有点击效果
• dash 虚线按钮，边框为虚线，有点击效果
• text 文本按钮，无边框，无点击效果
• link 链接按钮，带下划线，无边框，无点击效果

按钮颜色 color

按钮有六种颜色：白色、红色、蓝色、灰色、绿色、橘色

• blue 蓝色背景，有点击效果
• black 白色背景，有点击效果
• red 红色背景，有点击效果
• gray 灰色背景，有点击效果
• green 绿色背景，有点击效果
• orange 橘色背景，有点击效果

不可用状态 disable

添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变

• false 默认false，按钮可以正常点击
• true 设置为true时，按钮不可点击，背景变成深灰色

块级按钮 block

block 属性将使按钮适合其父宽度

• false 默认false，按钮宽度默认80px
• black 设置为true时，按钮跟随父级元素的宽度变化而变化

API文档

属性名称	描述	类型	默认值
type	按钮类型: 按钮有六种类型，分别为主按钮、次按钮、透明按钮、虚线按钮、文本按钮和链接按钮	default、clear、dash、text、link	default
color	按钮颜色：白色、红色、蓝色、灰色、绿色、橘色	blue、black、red、gray、green、orange	blue
disable	按钮是否可以点击	boolean	false
block	按钮是否跟随父级宽度	bolean	false
onClick	点击按钮时的回调	function	(event: MouseEvent) => void
shape	设置按钮形状	default、circle、round	default