简介
按钮组件是标记了一个(或封装一组)操作命令,响应用户点击行为的能力的魔笔基础组件。
配置项
分类 | 配置 | 示例 | 说明 |
分类 | 配置 | 示例 | 说明 |
内容 | 按钮文字 | 按钮显示的文本内容 | |
按钮类型 | 控制按钮的不同样式和行为 | ||
开启徽标 | 是否展示徽标 | ||
徽标配置 | 开启徽标后,可以配置徽标属性 | ||
悬浮提示 | 是否展示悬浮提示 | ||
悬浮提示配置 | 开启「悬浮提示」后,可以配置悬浮提示属性 | ||
扩展配置 | 可以配置按钮文本内容前后缀图标 | ||
交互 | 隐藏 | 隐藏,详情参见通用属性 | |
隐藏时保留布局 | 隐藏时保留布局,详情参见通用属性 | ||
交互类型 | 按钮的交互类型, 当按钮交互类型为提交或重置时,会自动触发表单提交或重置 | ||
加载 | 显示加载动画 | ||
禁用 | 控制组件是否禁用。禁用的组件展示为灰色,提示用户该组件不可用 | ||
样式 | 高度 | 高度,详情参见通用属性 | |
外边距 | 外边距,详情参见通用属性 | ||
幽灵样式 | 是否展示幽灵样式 | ||
危险按钮 | 展示危险按钮标记,强调操作的高风险,通常用于涉及数据丢失、账户删除或其他不可逆转操作的按钮 | ||
按钮形状 | 按钮展示形状,可以设置默认、圆形和圆角三种形状 | ||
按钮布局 | 按钮在容器内的布局方式,可选项:通栏、左侧、中央、右侧 | ||
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 |
| 点击操作 |
事件回调
事件名 | 说明 |
事件名 | 说明 |
组件点击时的回调 |
- 本页导读
- 简介
- 配置项
- 属性与方法
- 事件回调