跳到主要内容

按钮

WdButton

适用场景#

用于需要用户点击触发特定事件的场景,如信息提交、页面跳转等。

基础能力说明#

  1. 按钮的基础属性支持配置按钮的标题、颜色、类型、尺寸、是否通栏,可进行灵活选择和组合配置
  2. 按钮的高级属性支持配置加载中、图标按钮、按钮在表单中的使用场景,同时小程序端支持配置按钮对应的微信开放能力

扩展场景说明#

表单中的按钮使用场景#

示例

提交:表单中输入信息后点击按钮,提交表单信息到数据模型中

重置:表单中输入信息后点击按钮,清空表单中的输入内容

配置方法

提交:按钮属性区域-高级属性-表单类型-提交,当添加一个表单容器-选择数据模型之后,会自动生成表单和表单的提交按钮,表单容器中自动生成的按钮默认选中表单类型为提交

重置:按钮属性区域-高级属性-表单类型-重置,可以在表单中添加一个按钮,按钮标题修改为重置,按钮的表单类型设置为重置,在表单中输入内容之后,点击重置按钮可清空表单中已输入/选择的内容。(重置按钮基础属性-颜色中,可以选择次要;可通过样式面板中的 margin 灵活调整按钮间的外边距)

小程序中按钮使用场景#

示例

小程序转发

打开客服会话

示例#

交互式预览#

不同类型的按钮#

不同大小的按钮#

不同颜色的按钮#

带图标的按钮#

样式 API 自定义样式#

#wd-page-root .wd-btn {  border-color: cyan;  background-color: black;  border-width: 2px;  border-radius: 6px;}
#wd-page-root .wd-btn:hover {  background-color: #0c0096;}
#wd-page-root .wd-btn.is-disabled {  background-color: #888;}
#wd-page-root .wd-btn__text {  color: cyan;}

CSS 变量自定义样式#

#wd-page-root .wd-btn {  --wd-btn-typography-sm: var(--wd-font-weight-regular) var(--wd-font-size-3)    var(--wd-font-family);  --wd-btn-typography-md: var(--wd-font-weight-regular) var(--wd-font-size-4)    var(--wd-font-family);  --wd-btn-typography-lg: var(--wd-font-weight-regular) var(--wd-font-size-5)    var(--wd-font-family);  --wd-btn-border-radius: 0.3rem;  --wd-btn-color-brand: var(--wd-color-success);  --wd-btn-color-brand-hover: var(--wd-color-success-hover);  --wd-btn-color-brand-active: var(--wd-color-success-active);  --wd-btn-color-brand-focus: var(--wd-color-success-focus);  --wd-btn-color-brand-disabled: var(--wd-color-success-disabled);}

属性#

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
内容textstring基础属性"按钮"设置按钮的文本内容
颜色theme"primary"|"secondary"|"warning"|"error"基础属性"primary"设置按钮的颜色
类型variant"base"|"outline"|"text"|"link"基础属性"base"设置按钮的类型
尺寸size"sm"|"md"|"lg"基础属性"md"设置按钮的尺寸大小
是否通栏blockboolean基础属性false开启后按钮将撑满父容器
加载中loadingboolean高级属性false开启后按钮为加载中状态,展示文字加loading图标
展示图标iconType"none"|"text-with-icon"|"icon-only"高级属性"none"设置图标按钮
图标类型iconSource"inner"|"custom"高级属性"inner"选择图标的类型
图标样式icon"td:add-circle"|"td:add-rectangle"|"td:add"|"td:app"|"td:arrow-down-rectangle"|"td:arrow-down"|"td:arrow-left"|"td:arrow-right"|"td:arrow-up"|"td:attach"|"td:backtop-rectangle"|"td:backtop"|"td:backward"|"td:barcode"|"td:books"|"td:browse-off"|"td:browse"|"td:bulletpoint"|"td:calendar"|"td:call"|"td:caret-down-small"|"td:caret-down"|"td:caret-left-small"|"td:caret-left"|"td:caret-right-small"|"td:caret-right"|"td:caret-up-small"|"td:caret-up"|"td:cart"|"td:chart-bar"|"td:chart-bubble"|"td:chart-pie"|"td:chart"|"td:chat"|"td:check-circle-filled"|"td:check-circle"|"td:check-rectangle-filled"|"td:check-rectangle"|"td:check"|"td:chevron-down-circle"|"td:chevron-down-rectangle"|"td:chevron-down"|"td:chevron-left-circle"|"td:chevron-left-double"|"td:chevron-left-rectangle"|"td:chevron-left"|"td:chevron-right-circle"|"td:chevron-right-double"|"td:chevron-right-rectangle"|"td:chevron-right"|"td:chevron-up-circle"|"td:chevron-up-rectangle"|"td:chevron-up"|"td:circle"|"td:clear"|"td:close-circle-filled"|"td:close-circle"|"td:close-rectangle"|"td:close"|"td:cloud-download"|"td:cloud-upload"|"td:cloud"|"td:code"|"td:control-platform"|"td:creditcard"|"td:dashboard"|"td:delete"|"td:desktop"|"td:discount-filled"|"td:discount"|"td:download"|"td:edit-1"|"td:edit"|"td:ellipsis"|"td:enter"|"td:error-circle-filled"|"td:error-circle"|"td:error"|"td:file-add"|"td:file-copy"|"td:file-excel"|"td:file-image"|"td:file-paste"|"td:file-pdf"|"td:file-powerpoint"|"td:file-unknown"|"td:file-word"|"td:file"|"td:filter-clear"|"td:filter"|"td:flag"|"td:folder-add"|"td:folder-open"|"td:folder"|"td:fork"|"td:format-horizontal-align-bottom"|"td:format-horizontal-align-center"|"td:format-horizontal-align-top"|"td:format-vertical-align-center"|"td:format-vertical-align-left"|"td:format-vertical-align-right"|"td:forward"|"td:fullscreen-exit"|"td:fullscreen"|"td:gender-female"|"td:gender-male"|"td:gift"|"td:heart-filled"|"td:heart"|"td:help-circle-filled"|"td:help-circle"|"td:help"|"td:history"|"td:home"|"td:hourglass"|"td:image"|"td:info-circle-filled"|"td:info-circle"|"td:internet"|"td:jump"|"td:laptop"|"td:layers"|"td:link-unlink"|"td:link"|"td:location"|"td:lock-off"|"td:lock-on"|"td:login"|"td:logo-android"|"td:logo-apple-filled"|"td:logo-apple"|"td:logo-chrome-filled"|"td:logo-chrome"|"td:logo-codepen"|"td:logo-github-filled"|"td:logo-github"|"td:logo-ie-filled"|"td:logo-ie"|"td:logo-windows-filled"|"td:logo-windows"|"td:logout"|"td:mail"|"td:menu-fold"|"td:menu-unfold"|"td:minus-circle-filled"|"td:minus-circle"|"td:minus-rectangle"|"td:mobile-vibrate"|"td:mobile"|"td:money-circle"|"td:more"|"td:move"|"td:next"|"td:notification-filled"|"td:notification"|"td:order-adjustment-column"|"td:order-ascending"|"td:order-descending"|"td:page-first"|"td:page-last"|"td:pause-circle-filled"|"td:photo"|"td:play-circle-filled"|"td:play-circle-stroke"|"td:play-circle"|"td:play"|"td:poweroff"|"td:precise-monitor"|"td:previous"|"td:print"|"td:qrcode"|"td:queue"|"td:rectangle"|"td:refresh"|"td:remove"|"td:rollback"|"td:root-list"|"td:round"|"td:save"|"td:scan"|"td:search"|"td:secured"|"td:server"|"td:service"|"td:setting"|"td:share"|"td:shop"|"td:slash"|"td:sound"|"td:star-filled"|"td:star"|"td:stop-circle-1"|"td:stop-circle-filled"|"td:stop-circle"|"td:stop"|"td:swap-left"|"td:swap-right"|"td:swap"|"td:thumb-down"|"td:thumb-up"|"td:time-filled"|"td:time"|"td:tips"|"td:tools"|"td:unfold-less"|"td:unfold-more"|"td:upload"|"td:usb"|"td:user-add"|"td:user-avatar"|"td:user-circle"|"td:user-clear"|"td:user-talk"|"td:user"|"td:usergroup-add"|"td:usergroup-clear"|"td:usergroup"|"td:video"|"td:view-column"|"td:view-list"|"td:view-module"|"td:wallet"|"td:wifi"|"td:zoom-in"|"td:zoom-out"|"nointernet"|"success"|"warning"|"pending"|"refresh"|"folder"|"arrowup"|"arrowdown"|"arrowleft"|"arrowright"|"chevronup"|"chevrondown"|"chevronleft"|"chevronright"|"delete"|"edit"|"search"|"check"|"close"|"add"|"download"|"success-fill"|"close-fill"|"info-fill"|"pending-fill"|"warning-fill"|"more"|"star"|"star-fill"|"location"|"question"高级属性"success"选择预置图标
自定义图标iconSrcimage高级属性""设置自定义图标地址
图标位置iconPosition"before"|"after"高级属性"before"设置图标位置
是否禁用disabledboolean高级属性false开启后按钮将无法进行点击
表单类型formType"button"|"submit"|"reset"高级属性"button" 按钮: 适用于常见的按钮点击使用场景,可在事件配置区中对按钮组件配置点击事件并触发相应的执行动作;重置: 需配合表单容器组件使用,将按钮放置在表单容器中,点击后即可重置表单容器中表单组件的输入信息;提交: 需配合表单容器组件使用,将按钮放置在表单容器中,点击后即可对表单容器中的数据进行提交
微信开放能力(小程序)openType""|"contact"|"share"|"launchApp"|"openSetting"|"feedback"高级属性""仅支持在小程序构建时使用,为按钮配置小程序能力相关的各项按钮属性,用于相关微信能力的调用
会话来源(小程序)sessionFromstring高级属性""-
会话内消息卡片标题(小程序)sendMessageTitlestring高级属性""-
会话内消息卡片点击跳转小程序路径(小程序)sendMessagePathstring高级属性""-
会话内消息卡片图片(小程序)sendMessageImgstring高级属性""-
是否显示会话内消息卡片(小程序)showMessageCardboolean高级属性false-
打开APP时,向APP传递的参数(小程序)appParameterstring高级属性""-

事件#

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
点击tap兼容三端-
客服会话contact
  • errMsg:string错误信息
  • path:string小程序消息指定的路径
  • query:object小程序消息指定的查询参数
小程序-
打开ApplaunchApp小程序-
打开授权设置openSetting小程序-

属性 API#

通过属性 API,可以获取组件内部的状态和属性值

只读属性名
属性标识
类型
说明
内容textstring设置按钮的文本内容
颜色theme"primary"|"secondary"|"warning"|"error"设置按钮的颜色
类型variant"base"|"outline"|"text"|"link"设置按钮的类型
尺寸size"sm"|"md"|"lg"设置按钮的尺寸大小
是否通栏blockboolean开启后按钮将撑满父容器
是否禁用disabledboolean开启后按钮将无法进行点击
表单类型formType"button"|"submit"|"reset" 按钮: 适用于常见的按钮点击使用场景,可在事件配置区中对按钮组件配置点击事件并触发相应的执行动作;重置: 需配合表单容器组件使用,将按钮放置在表单容器中,点击后即可重置表单容器中表单组件的输入信息;提交: 需配合表单容器组件使用,将按钮放置在表单容器中,点击后即可对表单容器中的数据进行提交
微信开放能力openType""|"contact"|"share"|"launchApp"|"openSetting"|"feedback"仅支持在小程序构建时使用,为按钮配置小程序能力相关的各项按钮属性,用于相关微信能力的调用

方法 API#

样式 API#

通过样式 API,可以覆盖组件中内部元素的样式来实现自定义

名称
类名
说明
根元素.wd-btn按钮组件根元素
图标.wd-btn__icon按钮的图标元素(共享样式)
前置图标.wd-btn__before-icon按钮内的前置图标
后置图标.wd-btn__after-icon按钮内的后置图标
禁用状态.wd-btn.is-disabled按钮禁用状态
文本.wd-btn__text按钮内显示的文本
PC 端按钮根元素.wd-pc-btn可以为 PC 端的按钮编写样式
H5 端按钮根元素.wd-h5-btn可以为 H5 端的按钮编写样式
小程序端按钮根元素.wd-mp-btn可以为小程序端的按钮编写样式

了解样式 API

CSS 变量#

.wd-btn {  --wd-btn-sm-padding: 0.0625rem calc(var(--wd-space-base) * 2);  --wd-btn-md-padding: 0.25rem calc(var(--wd-space-base) * 4);  --wd-btn-lg-padding: 0.4375rem calc(var(--wd-space-base) * 6);
  --wd-btn-typography-sm: var(--wd-typography-body-sm);  --wd-btn-typography-md: var(--wd-typography-body-md);  --wd-btn-typography-lg: var(--wd-typography-body-lg);  --wd-btn-border-radius: var(--wd-border-radius);
  //文字颜色  --wd-btn-color-text: var(--wd-color-text-default);  --wd-btn-color-text-inverse: var(--wd-color-text-inverse);  --wd-btn-color-text-hover: var(--wd-color-text-default);  --wd-btn-color-text-active: var(--wd-color-text-default);  --wd-btn-color-text-focus: var(--wd-color-text-default);  --wd-btn-color-text-disabled: var(--wd-color-text-disabled);
  // 品牌色  --wd-btn-color-brand: var(--wd-color-brand);  --wd-btn-color-brand-hover: var(--wd-color-brand-hover);  --wd-btn-color-brand-active: var(--wd-color-brand-active);  --wd-btn-color-brand-focus: var(--wd-color-brand-focus);  --wd-btn-color-brand-disabled: var(--wd-color-brand-disabled);
  // 警告色  --wd-btn-color-warning: var(--wd-color-warning);  --wd-btn-color-warning-hover: var(--wd-color-warning-hover);  --wd-btn-color-warning-active: var(--wd-color-warning-active);  --wd-btn-color-warning-focus: var(--wd-color-warning-focus);  --wd-btn-color-warning-disabled: var(--wd-color-warning-disabled);  // 错误色  --wd-btn-color-error: var(--wd-color-error);  --wd-btn-color-error-hover: var(--wd-color-error-hover);  --wd-btn-color-error-active: var(--wd-color-error-active);  --wd-btn-color-error-focus: var(--wd-color-error-focus);  --wd-btn-color-error-disabled: var(--wd-color-error-disabled);
  // 灰色  --wd-btn-color-gray: var(--wd-color-gray-3);  --wd-btn-color-gray-hover: var(--wd-color-gray-4);  --wd-btn-color-gray-active: var(--wd-color-gray-6);  --wd-btn-color-gray-focus: var(--wd-color-gray-3);  --wd-btn-color-gray-disabled: var(--wd-color-gray-2);
  --wd-btn-color-gray-border: var(--wd-color-gray-4);  --wd-btn-color-gray-border-hover: var(--wd-color-gray-5);  --wd-btn-color-gray-border-active: var(--wd-color-gray-6);  --wd-btn-color-gray-border-disabled: var(--wd-color-gray-4);
  // 白色底  --wd-btn-color-white: var(--wd-white);  --wd-btn-color-white-hover: var(--wd-color-gray-1);  --wd-btn-color-white-active: var(--wd-color-gray-3);  --wd-btn-color-white-disabled: var(--wd-color-gray-2);}

版本变化#

相比旧版按钮

  • 按钮默认大小进行了调整,增加通栏按钮配置(升级后原有按钮的默认尺寸会发生变化)
  • 按钮去掉默认的 padding,在页面中不再默认居中,单个按钮移动端不再默认独占一行(升级后需关注页面布局变化,按需调整)
  • 丰富了按钮默认颜色,升级后请关注默认按钮的颜色变化,按需调整
  • 按钮禁用状态样式进行了优化
  • 按钮新增支持按钮中图标的配置能力
  • 丰富了按钮的默认类型,提供填充、描边、文字、链接可选