Wot UI1.14.0

简体中文

English

简体中文

English

Appearance

赞助位
成为赞助商

Button 按钮 ​

按钮用于触发一个操作，如提交表单或打开链接。

组件类型 ​

类型 ​

html
<wd-button>主要按钮</wd-button>
<wd-button type="success">成功按钮</wd-button>
<wd-button type="info">信息按钮</wd-button>
<wd-button type="warning">警告按钮</wd-button>
<wd-button type="danger">危险按钮</wd-button>

组件状态 ​

禁用 ​

设置 disabled 属性。

html
<wd-button disabled>默认按钮</wd-button>

加载 ​

设置 loading 属性，让按钮处于加载中状态。加载中的按钮是禁止点击的。

html
<wd-button loading>加载中</wd-button>

组件变体 ​

镂空 ​

设置 variant="plain"。

html
<wd-button variant="plain">主要按钮</wd-button>

虚线 ​

设置 variant="dashed"。

html
<wd-button variant="dashed">主要按钮</wd-button>

文字 ​

设置 variant="text"。

html
<wd-button variant="text">文字按钮</wd-button>

组件样式 ​

尺寸 ​

设置 size ，支持 'mini'、'small'、'medium'、'large'，默认为 'medium'。

html
<wd-button size="mini">迷你按钮</wd-button>
<wd-button size="small">小号按钮</wd-button>
<wd-button size="medium">中号按钮</wd-button>
<wd-button size="large">大号按钮</wd-button>

细边框与圆角 ​

设置 hairline 与 round 属性。

html
<wd-button variant="plain" hairline>细边框</wd-button>
<wd-button variant="plain" round>圆角按钮</wd-button>

特殊样式 ​

custom-class 阴影 ​

通过 custom-class 和 custom-style 属性可以自定义按钮样式，这里使用 custom-class 添加 Material Design 3 风格 box-shadow。

html
<view class="page-class">
  <wd-button custom-class="custom-shadow">主要按钮</wd-button>
  <wd-button type="success" custom-class="custom-shadow">成功按钮</wd-button>
  <wd-button type="info" custom-class="custom-shadow">信息按钮</wd-button>
  <wd-button type="warning" custom-class="custom-shadow">警告按钮</wd-button>
  <wd-button type="danger" custom-class="custom-shadow">危险按钮</wd-button>
</view>
scss
.page-class {
  :deep() {
    .custom-shadow {
      box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    }
  }
}

内容形态 ​

纯图标按钮 ​

设置 icon 属性可展示图标按钮。

html
<wd-button icon="edit-outline"></wd-button>

图文按钮 ​

结合 icon 与内容展示图文按钮；结合 classPrefix 可使用自定义图标，参见 Icon 自定义图标。

html
<wd-button icon="download">下载</wd-button>
<wd-button classPrefix="fish" icon="kehuishouwu">可回收</wd-button>

布局能力 ​

块状按钮 ​

设置 block 属性。

html
<wd-button block>主要按钮</wd-button>

Attributes ​

参数说明类型默认值
type按钮类型，可选值为 primary、success、info、warning、dangerstringprimary
variant按钮变体，可选值为 base、plain、dashed、textstringbase
size按钮尺寸，可选值为 mini、small、medium、largestringmedium
round圆角按钮booleanfalse
disabled禁用按钮booleanfalse
hairline细边框booleanfalse
block块状按钮booleanfalse
loading加载中按钮booleanfalse
text按钮文本string-
icon图标类名string-
classPrefix v0.1.27图标类名前缀stringwd-icon
loading-props加载配置项Partial<LoadingProps>-
open-type开放能力类型，详见下方 ButtonOpenTypestring-
hover-stop-propagation阻止祖先节点点击态booleanfalse
hover-start-time按下后多久出现点击态（ms）number20
hover-stay-time松开后多久移除点击态（ms）number70
lang用户信息语言，可选值为 zh_CN、zh_TW、enstring-
session-from会话来源（open-type=contact 时有效）string-
send-message-title会话消息卡片标题（open-type=contact 时有效）string当前标题
send-message-path会话消息卡片路径（open-type=contact 时有效）string当前分享路径
send-message-img会话消息卡片图片（open-type=contact 时有效）string截图
app-parameter打开 APP 传参（open-type=launchApp 时有效）string-
show-message-card显示会话消息卡片（open-type=contact 时有效）booleanfalse
button-id v1.3.6按钮唯一标识string-
scope v1.3.14支付宝授权范围，可选值为 phoneNumber、userInfo（open-type=getAuthorize 时有效）string-
loading-color加载图标颜色string-
custom-class根节点自定义类名string-
custom-style根节点自定义样式string-

ButtonOpenType 开放能力 ​

属性说明
feedback打开“意见反馈”页
share触发用户转发
getUserInfo获取用户信息
contact打开客服会话
getPhoneNumber获取手机号
getRealtimePhoneNumber实时获取手机号（仅微信）
launchApp在小程序中打开 APP
openSetting打开授权设置页
chooseAvatar获取用户头像
getAuthorize支持支付宝授权（配合 scope）
lifestyle关注生活号（支付宝）
contactShare分享到通讯录（支付宝）
openGroupProfile打开群资料卡（微信）
openGuildProfile打开频道资料卡（微信）
openPublicProfile打开公众号资料卡（微信）
shareMessageToFriend分享消息给朋友（微信）
addFriend添加好友（微信）
addColorSign添加彩签（微信）
addGroupApp添加群应用（微信）
addToFavorites收藏（微信）
chooseAddress选择收货地址（微信）
chooseInvoiceTitle选择发票抬头（微信）
login授权登录（平台能力）
subscribe订阅（平台能力）
favorite收藏（平台能力）
watchLater稍后再看（平台能力）
openProfile打开个人主页（平台能力）
agreePrivacyAuthorization用户同意隐私协议

Events ​

事件名称说明参数
click点击事件event
getuserinfo获取用户信息回调event
contact客服消息回调（open-type=contact）event
getphonenumber获取手机号回调（open-type=getPhoneNumber）event
getrealtimephonenumber v1.13.0实时获取手机号回调（open-type=getRealtimePhoneNumber）event
error开放能力错误回调（open-type=launchApp）event
launchapp打开 APP 成功回调（open-type=launchApp）event
opensetting打开授权设置页回调（open-type=openSetting）event
chooseavatar获取用户头像回调（open-type=chooseAvatar）event
agreeprivacyauthorization同意隐私协议回调（open-type=agreePrivacyAuthorization）event

Slots ​

name说明
default按钮内容

主题定制 ​

CSS 变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称默认值描述
--wot-button-primary-bg$primary-6主类型背景色
--wot-button-primary-bg-active$primary-7主类型背景激活色
--wot-button-primary-color$primary-6主类型文本色
--wot-button-primary-color-active$primary-7主类型文本激活色
--wot-button-primary-plain-bg$filled-zero主类型 plain 背景色
--wot-button-primary-plain-bg-active$primary-1主类型 plain 背景激活色
--wot-button-primary-plain-border$primary-6主类型 plain 边框色
--wot-button-primary-plain-border-active$primary-7主类型 plain 边框激活色
--wot-button-success-bg$success-main成功类型背景色
--wot-button-success-bg-active$success-clicked成功类型背景激活色
--wot-button-success-color$success-main成功类型文本色
--wot-button-success-color-active$success-clicked成功类型文本激活色
--wot-button-success-plain-bg$filled-zero成功类型 plain 背景色
--wot-button-success-plain-bg-active$success-surface成功类型 plain 背景激活色
--wot-button-success-plain-border$success-main成功类型 plain 边框色
--wot-button-success-plain-border-active$success-clicked成功类型 plain 边框激活色
--wot-button-danger-bg$danger-main危险类型背景色
--wot-button-danger-bg-active$danger-clicked危险类型背景激活色
--wot-button-danger-color$danger-main危险类型文本色
--wot-button-danger-color-active$danger-clicked危险类型文本激活色
--wot-button-danger-plain-bg$filled-zero危险类型 plain 背景色
--wot-button-danger-plain-bg-active$danger-surface危险类型 plain 背景激活色
--wot-button-danger-plain-border$danger-main危险类型 plain 边框色
--wot-button-danger-plain-border-active$danger-clicked危险类型 plain 边框激活色
--wot-button-warning-bg$warning-main警告类型背景色
--wot-button-warning-bg-active$warning-clicked警告类型背景激活色
--wot-button-warning-color$warning-main警告类型文本色
--wot-button-warning-color-active$warning-clicked警告类型文本激活色
--wot-button-warning-plain-bg$filled-zero警告类型 plain 背景色
--wot-button-warning-plain-bg-active$warning-surface警告类型 plain 背景激活色
--wot-button-warning-plain-border$warning-main警告类型 plain 边框色
--wot-button-warning-plain-border-active$warning-clicked警告类型 plain 边框激活色
--wot-button-info-bg$filled-content信息类型背景色
--wot-button-info-bg-active$filled-strong信息类型背景激活色
--wot-button-info-color$text-main信息类型文本色
--wot-button-info-color-active$text-secondary信息类型文本激活色
--wot-button-info-plain-bg$filled-zero信息类型 plain 背景色
--wot-button-info-plain-bg-active$filled-bottom信息类型 plain 背景激活色
--wot-button-info-plain-border$border-main信息类型 plain 边框色
--wot-button-info-plain-border-active$border-strong信息类型 plain 边框激活色
--wot-button-main-color$text-white实心按钮默认文本色
--wot-button-size-icon-mini$n-14mini 尺寸图标字号
--wot-button-size-icon-small$n-16small 尺寸图标字号
--wot-button-size-icon-medium$n-20medium 尺寸图标字号
--wot-button-size-icon-large$n-22large 尺寸图标字号
--wot-button-loading-size$n-20加载图标尺寸
--wot-button-loading-spacing$spacing-extra-tight加载图标与文字间距
--wot-button-font-size-mini$typography-body-size-mainmini 尺寸文字字号
--wot-button-font-size-small$typography-body-size-mainsmall 尺寸文字字号
--wot-button-font-size-medium$typography-body-size-extra-largemedium 尺寸文字字号
--wot-button-font-size-large$typography-body-size-extra-largelarge 尺寸文字字号
--wot-button-line-height-mini$typography-body-line--height-size-mainmini 尺寸文字行高
--wot-button-line-height-small$typography-body-line--height-size-mainsmall 尺寸文字行高
--wot-button-line-height-medium$typography-body-line--height-size-extra-largemedium 尺寸文字行高
--wot-button-line-height-large$typography-body-line--height-size-extra-largelarge 尺寸文字行高
--wot-button-left-right-padding-mini$padding-loosemini 尺寸左右内边距
--wot-button-left-right-padding-small$padding-loosesmall 尺寸左右内边距
--wot-button-left-right-padding-medium$padding-extra-loosemedium 尺寸左右内边距
--wot-button-left-right-padding-large$padding-super-looselarge 尺寸左右内边距
--wot-button-up-down-padding-mini$padding-super-tightmini 尺寸上下内边距
--wot-button-up-down-padding-small$padding-extra-tightsmall 尺寸上下内边距
--wot-button-up-down-padding-medium$padding-tightmedium 尺寸上下内边距
--wot-button-up-down-padding-large$padding-mainlarge 尺寸上下内边距
--wot-button-only-icon-padding-mini$padding-super-tightmini 尺寸仅图标按钮内边距
--wot-button-only-icon-padding-small$padding-extra-tightsmall 尺寸仅图标按钮内边距
--wot-button-only-icon-padding-medium$padding-tightmedium 尺寸仅图标按钮内边距
--wot-button-only-icon-padding-large$padding-looselarge 尺寸仅图标按钮内边距
--wot-button-spacing-mini$spacing-super-tightmini 尺寸图标与文字间距
--wot-button-spacing-small$spacing-super-tightsmall 尺寸图标与文字间距
--wot-button-spacing-medium$spacing-extra-tightmedium 尺寸图标与文字间距
--wot-button-spacing-large$spacing-extra-tightlarge 尺寸图标与文字间距
--wot-button-spacing-block$spacing-tight块级按钮纵向间距
--wot-button-radius-main$radius-main默认圆角
--wot-button-radius-full$radius-radius-full圆形圆角
--wot-button-disabled$opacity-disabled禁用态透明度

源代码 ​

文档
 • 组件

Released under the MIT License.

Copyright © 2023-present weisheng

Released under the MIT License.

Copyright © 2023-present weisheng