按钮

更新时间:2025-01-24 07:41:34

简介

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

image.png

配置项

分类

配置

示例

说明

分类

配置

示例

说明

内容

按钮文字

image

按钮显示的文本内容

按钮类型

image

控制按钮的不同样式和行为

开启徽标

image

是否展示徽标

徽标配置

imageimage

开启徽标后,可以配置徽标属性

悬浮提示

image

是否展示悬浮提示

悬浮提示配置

image

开启「悬浮提示」后,可以配置悬浮提示属性

扩展配置

image

可以配置按钮文本内容前后缀图标

交互

隐藏

image

隐藏,详情参见通用属性

隐藏时保留布局

image

隐藏时保留布局,详情参见通用属性

交互类型

image

按钮的交互类型, 当按钮交互类型为提交或重置时,会自动触发表单提交或重置

加载

image

显示加载动画

禁用

image

控制组件是否禁用。禁用的组件展示为灰色,提示用户该组件不可用

样式

高度

image

高度,详情参见通用属性

外边距

image

外边距,详情参见通用属性

幽灵样式

image

是否展示幽灵样式

危险按钮

image

展示危险按钮标记,强调操作的高风险,通常用于涉及数据丢失、账户删除或其他不可逆转操作的按钮

按钮形状

image

按钮展示形状,可以设置默认、圆形和圆角三种形状

按钮布局

image

按钮在容器内的布局方式,可选项:通栏、左侧、中央、右侧

CSS样式

CSS样式

image

添加CSS样式

添加CSS样式

image

不同按钮允许添加不同css样式

圆角

image

详情参见通用属性

按钮内容字体大小

image

按钮内容字体大小

按钮内容字体行高

image

按钮内容字体行高

主要按钮激活态背景色

image

设置当按钮类型为主要按钮时的激活状态的背景色,详情参见通用属性

主要按钮激活态文本颜色

image

设置当按钮类型为主要按钮时激活状态的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明

主要按钮悬浮态背景色

image

设置当按钮类型为主要按钮时悬浮状态的背景色,详情参见通用属性

主要按钮悬浮态文本颜色

image

设置当按钮类型为主要按钮时悬浮状态的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明

主要按钮背景色

image

设置当按钮类型为主要按钮时的背景色,详情参见通用属性

主要按钮文本颜色

image

设置当按钮类型为主要按钮时的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明

默认按钮激活态背景色

image

设置当按钮类型为默认按钮时激活状态的背景色,详情参见通用属性

默认按钮激活态边框颜色

image

设置当按钮类型为默认按钮时激活状态的边框颜色,对应 CSS 属性:border-color,查看 mdn 详细说明

默认按钮激活态文本颜色

image

设置当按钮类型为默认按钮时激活状态的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明

默认按钮悬浮态背景色

image

设置当按钮类型为默认按钮时悬浮状态的背景色,详情参见通用属性

默认按钮悬浮态边框颜色

image

设置当按钮类型为默认按钮时悬浮状态边框颜色,对应 CSS 属性:border-color,查看 mdn 详细说明

默认按钮悬浮态文本颜色

image

设置当按钮类型为默认按钮时悬浮状态文本颜色,对应 CSS 属性:color,查看 mdn 详细说明

默认按钮背景色

image

设置当按钮类型为默认按钮时的背景色,详情参见通用属性

默认按钮边框颜色

image

设置当按钮类型为默认按钮时边框颜色,对应 CSS 属性:border-color,查看 mdn 详细说明

默认按钮文本颜色

image

设置当按钮类型为默认按钮时文本颜色,对应 CSS 属性:color,查看 mdn 详细说明

文本按钮激活态背景色

image

设置当按钮类型为文本按钮时激活状态的背景色,详情参见通用属性

文本按钮禁用时文本颜色

image

设置当按钮类型为文本按钮时禁用时的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明

文本按钮文本颜色

image

设置当按钮类型为文本按钮时的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明

文本按钮悬浮时背景颜色

image

设置当按钮类型为文本按钮时悬浮状态的背景色,详情参见通用属性

链接按钮激活态文本颜色

image

设置当按钮类型为链接按钮时激活状态的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明

链接按钮文本颜色

image

设置当按钮类型为链接按钮时的文本颜色,对应 CSS 属性:color,查看 mdn 详细说明

链接按钮文本悬浮时颜色

image

设置当按钮类型为链接按钮时文本悬浮状态的颜色,对应 CSS 属性:color,查看 mdn 详细说明

属性与方法

名称

类型

示例

说明

名称

类型

示例

说明

text

string

button.text

按钮文本

setText

func

button.setText('主要按钮')

设置按钮文本

clearText

func

button.clearText()

清除按钮文本

loading

boolean

button.loading

按钮加载状态

setLoading

func

button.setLoading(true)

设置按钮加载状态

disabled

boolean

button.disabled

是否禁用当前按钮

setDisabled

func

button.setDisabled(true)

设置是否禁用当前按钮

clearDisabled

func

button.clearDisabled()

清除按钮禁用按状态

click

func

button.click()

点击操作

事件回调

事件名

说明

事件名

说明

image

组件点击时的回调

  • 本页导读
  • 简介
  • 配置项
  • 属性与方法
  • 事件回调
AI助理

点击开启售前

在线咨询服务

你好,我是AI助理

可以解答问题、推荐解决方案等