简介
按钮组件是标记了一个(或封装一组)操作命令,响应用户点击行为的能力的魔笔基础组件。

配置项
分类 | 配置 | 示例 | 说明 |
内容 | 按钮文字 |
| 按钮显示的文本内容 |
按钮类型 |
| 控制按钮的不同样式和行为 | |
开启徽标 |
| 是否展示徽标 | |
徽标配置 |
| 开启徽标后,可以配置徽标属性 | |
悬浮提示 |
| 是否展示悬浮提示 | |
悬浮提示配置 |
| 开启「悬浮提示」后,可以配置悬浮提示属性 | |
扩展配置 |
| 可以配置按钮文本内容前后缀图标 | |
交互 | 隐藏 |
| 隐藏,详情参见通用属性 |
隐藏时保留布局 |
| 隐藏时保留布局,详情参见通用属性 | |
交互类型 |
| 按钮的交互类型, 当按钮交互类型为提交或重置时,会自动触发表单提交或重置 | |
加载 |
| 显示加载动画 | |
禁用 |
| 控制组件是否禁用。禁用的组件展示为灰色,提示用户该组件不可用 | |
样式 | 高度 |
| 高度,详情参见通用属性 |
外边距 |
| 外边距,详情参见通用属性 | |
幽灵样式 |
| 是否展示幽灵样式 | |
危险按钮 |
| 展示危险按钮标记,强调操作的高风险,通常用于涉及数据丢失、账户删除或其他不可逆转操作的按钮 | |
按钮形状 |
| 按钮展示形状,可以设置默认、圆形和圆角三种形状 | |
按钮布局 |
| 按钮在容器内的布局方式,可选项:通栏、左侧、中央、右侧 | |
CSS样式 | CSS样式 |
| 添加CSS样式 |
添加CSS样式 |
| 不同按钮允许添加不同css样式 | |
圆角 |
| 详情参见通用属性 | |
按钮内容字体大小 |
| 按钮内容字体大小 | |
按钮内容字体行高 |
| 按钮内容字体行高 | |
主要按钮激活态背景色 |
| 设置当按钮类型为主要按钮时的激活状态的背景色,详情参见通用属性 | |
主要按钮激活态文本颜色 |
| 设置当按钮类型为主要按钮时激活状态的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明 | |
主要按钮悬浮态背景色 |
| 设置当按钮类型为主要按钮时悬浮状态的背景色,详情参见通用属性 | |
主要按钮悬浮态文本颜色 |
| 设置当按钮类型为主要按钮时悬浮状态的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明 | |
主要按钮背景色 |
| 设置当按钮类型为主要按钮时的背景色,详情参见通用属性 | |
主要按钮文本颜色 |
| 设置当按钮类型为主要按钮时的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明 | |
默认按钮激活态背景色 |
| 设置当按钮类型为默认按钮时激活状态的背景色,详情参见通用属性 | |
默认按钮激活态边框颜色 |
| 设置当按钮类型为默认按钮时激活状态的边框颜色,对应 CSS 属性:border-color,查看 mdn 详细说明 | |
默认按钮激活态文本颜色 |
| 设置当按钮类型为默认按钮时激活状态的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明 | |
默认按钮悬浮态背景色 |
| 设置当按钮类型为默认按钮时悬浮状态的背景色,详情参见通用属性 | |
默认按钮悬浮态边框颜色 |
| 设置当按钮类型为默认按钮时悬浮状态的边框颜色,对应 CSS 属性:border-color,查看 mdn 详细说明 | |
默认按钮悬浮态文本颜色 |
| 设置当按钮类型为默认按钮时悬浮状态的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明 | |
默认按钮背景色 |
| 设置当按钮类型为默认按钮时的背景色,详情参见通用属性 | |
默认按钮边框颜色 |
| 设置当按钮类型为默认按钮时的边框颜色,对应 CSS 属性:border-color,查看 mdn 详细说明 | |
默认按钮文本颜色 |
| 设置当按钮类型为默认按钮时的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明 | |
文本按钮激活态背景色 |
| 设置当按钮类型为文本按钮时激活状态的背景色,详情参见通用属性 | |
文本按钮禁用时文本颜色 |
| 设置当按钮类型为文本按钮时禁用时的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明 | |
文本按钮文本颜色 |
| 设置当按钮类型为文本按钮时的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明 | |
文本按钮悬浮时背景颜色 |
| 设置当按钮类型为文本按钮时悬浮状态的背景色,详情参见通用属性 | |
链接按钮激活态文本颜色 |
| 设置当按钮类型为链接按钮时激活状态的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明 | |
链接按钮文本颜色 |
| 设置当按钮类型为链接按钮时的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明 | |
链接按钮文本悬浮时颜色 |
| 设置当按钮类型为链接按钮时文本悬浮状态的颜色,对应 CSS 属性:color,查看 mdn 详细说明 |
属性与方法
名称 | 类型 | 示例 | 说明 |
text | string |
| 按钮文本 |
setText | func |
| 设置按钮文本 |
clearText | func |
| 清除按钮文本 |
loading | boolean |
| 按钮加载状态 |
setLoading | func |
| 设置按钮加载状态 |
disabled | boolean |
| 是否禁用当前按钮 |
setDisabled | func |
| 设置是否禁用当前按钮 |
clearDisabled | func |
| 清除按钮禁用按状态 |
click | func |
| 点击操作 |
事件回调
事件名 | 说明 |
| 组件点击时的回调 |














































