跳到主要内容

按钮 Button

按钮用于触发一个操作，如路由跳转、打开弹框、提交表单等

API

安装使用​

{
  // 原生小程序
  "usingComponents": {
    "ti-button": "@titian-design/weapp/button/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-button": "platform://titian-mp/ti-button"
  }
}

用法示例​

按钮类型
默认警告成功错误信息
copy
code
按钮尺寸
高度48px高度56px高度64px高度80px高度96px
copy
code
按钮圆角
胶囊按钮默认圆角按钮直角按钮
copy
code
禁用按钮
面性强调面性次要线框按钮文字按钮
copy
code
搭配图标
左图标右图标
copy
code
按钮风格
面性强调面性次要线框按钮文字按钮
copy
code
按钮颜色
确定确定确定渐变按钮
copy
code
按钮边框
一像素边框
发丝线，仅适用 variant='outlined' 风格
copy
code
块级按钮
块级定宽自适应宽度
copy
code
加载状态
提交
copy
code

ti-button API​

属性 Properties​

名称类型必填默认值说明备注
typestring否primary按钮类型，可选值为 primary info error warning success simplesimple仅在variant: outlined 模式下可用，灰色调
sizestring否big按钮尺寸，可选值为 tiny small medium big large 分别对应高度48rpx 56rpx 64rpx 80rpx 96rpx-
variantstring否contained按钮风格，可选值为 contained filled outlined text semi-outlined-
colorstring否theme.color.brand.1000按钮颜色，十六进制色值 #ffffff linear-gradient渐变色渐变色仅在variant：contained模式下可用，color的权重高于type
shapestring否round按钮圆角风格，可选值为 capsule round rect-
hairlineboolean否true当 size 为 tiny small medium，是否使用发丝 1rpx 边框-
disabledboolean否false是否禁用按钮-
loadingboolean否false是否显示为加载状态-
blockboolean否false将按钮宽度调整为其父宽度的选项-
prefix-iconstring否-按钮文字左侧图标-
suffix-iconstring否-按钮文字右侧图标-
loading-sizenumber否30加载图标大小，单位 rpx-
loading-typestring否circular加载图标类型，可选择circular spinner-
loading-textstring否-加载图标文字-
form-typestring否-用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件-
open-typestring否-微信开放能力-
hover-classstring否active指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果-
hover-start-timenumber否20按住后多久出现点击态，单位毫秒-
hover-stay-timenumber否70手指松开后点击态保留时间，单位毫秒-
langstring否en指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。-
session-fromstring否-会话来源，open-type="contact"时有效-
send-message-titlestring否-会话内消息卡片标题，open-type="contact"时有效-
send-message-pathstring否-会话内消息卡片点击跳转小程序路径，open-type="contact"时有效-
send-message-imgstring否-会话内消息卡片图片，open-type="contact"时有效-
app-parameterstring否-打开 APP 时，向 APP 传递的参数，open-type=launchApp 时有效-
show-message-cardboolean否-是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效-
datasetany否-按钮 dataset，open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值
ext-stylestring | Record<string, string>否-根节点样式-

事件 Events​

名称参数列表描述备注
bind:click(e: WechatMiniprogram.CustomEvent) => void点击按钮，且按钮状态不为加载或禁用时触发-
bind:getuserinfo(e: WechatMiniprogram.CustomEvent) => void用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，open-type="getUserInfo"时有效-
bind:contact(e: WechatMiniprogram.CustomEvent) => void客服消息回调，open-type="contact"时有效-
bind:getphonenumber(e: WechatMiniprogram.CustomEvent) => void获取用户手机号回调，open-type=getPhoneNumber 时有效-
bind:error(e: WechatMiniprogram.CustomEvent) => void当使用开放能力时，发生错误的回调，open-type=launchApp 时有效-
bind:opensetting(e: WechatMiniprogram.CustomEvent) => void在打开授权设置页后回调，open-type=openSetting 时有效-
bind:launchapp(e: WechatMiniprogram.CustomEvent) => void打开 APP 成功的回调，open-type=launchApp 时有效-

插槽 Slots​

名称说明备注
default默认插槽-

外部样式类 External Classes​

名称说明备注
ext-class根节点样式类-
loading-class加载图标样式类-
prefix-icon-class左侧图标样式类-
suffix-icon-class右侧图标样式类-

CSS 变量 CSS Variable​

变量 默认值说明备注
--button-padding-vtheme.spacing.vertical.v2垂直方向内边距（size="tiny"）-
theme.spacing.vertical.v3垂直方向内边距（size="small"）-
theme.spacing.vertical.v4垂直方向内边距（size="medium"）-
theme.spacing.vertical.v5垂直方向内边距（size="big"）-
theme.spacing.vertical.v7垂直方向内边距（size="large"）-
--button-padding-htheme.spacing.horizontal.h3水平方向内边距（size="tiny"）-
theme.spacing.horizontal.h5水平方向内边距（size="small"）-
theme.spacing.horizontal.h6水平方向内边距（size="medium"）-
theme.spacing.horizontal.h8水平方向内边距（size="big"）-
theme.spacing.horizontal.h11水平方向内边距（size="large"）-
--button-font-sizetheme.fontSize.t4字号（size="tiny"）-
theme.fontSize.t5字号（size="small"）-
theme.fontSize.t5字号（size="medium"）-
theme.fontSize.t6字号（size="big"）-
theme.fontSize.t8字号（size="large"）-
--button-radiustheme.borderRadius.r2圆角-
--button-margin0整体外边距-
--button-line-heighttheme.lineHeight.multiline.t2行高（size="tiny"）-
theme.lineHeight.multiline.t2行高（size="small"）-
theme.lineHeight.multiline.t2行高（size="medium"）-
theme.lineHeight.multiline.t4行高（size="big"）-
theme.lineHeight.multiline.t4行高（size="large"）-
--button-font-weighttheme.fontWeight.semibold字重-
--button-icon-sizetheme.fontSize.t6icon尺寸（size="tiny"）-
theme.fontSize.t8icon尺寸（size="small"）-
theme.fontSize.t8icon尺寸（size="medium"）-
theme.fontSize.t8icon尺寸（size="big"）-
theme.fontSize.t10icon尺寸（size="large"）-
--button-icon-gaptheme.spacing.gap.g2文字和图标间距-