按钮 Button
按钮用于触发一个操作，如路由跳转、打开弹框、提交表单等
使用
API用法示例
按钮类型
<ti-button type="primary">默认</ti-button>
<ti-button type="warning">警告</ti-button>
<ti-button type="success">成功</ti-button>
<ti-button type="error">错误</ti-button>
<ti-button type="info">信息</ti-button>
按钮风格
<ti-button variant="contained">面性强调</ti-button>
<ti-button variant="filled">面性次要</ti-button>
<ti-button variant="outlined">线框按钮</ti-button>
<ti-button variant="text">文字按钮</ti-button>
按钮尺寸
<ti-button size="tiny">高度48rpx</ti-button>
<ti-button size="small">高度56rpx</ti-button>
<ti-button size="medium">高度64rpx</ti-button>
<ti-button size="big">高度80rpx</ti-button>
<ti-button size="large">高度96rpx</ti-button>
按钮颜色
<ti-button color="#7232dd">确定</ti-button>
<ti-button color="blue">确定</ti-button>
<ti-button color="rgb(7, 193, 96)">确定</ti-button>
<ti-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变按钮</ti-button>
按钮圆角
<ti-button shape="capsule">胶囊按钮</ti-button>
<ti-button shape="round">默认圆角按钮</ti-button>
<ti-button shape="rect">直角按钮</ti-button>
按钮边框
发丝线，仅适用 variant="outlined"风格
<ti-button variant="outlined" hairline>一像素边框</ti-button>
禁用按钮
<ti-button disabled>确定</ti-button>
块级按钮
<ti-button block>块级</ti-button>
<ti-button ext-style="width:200px;">定宽</ti-button>
<ti-button>自适应宽度</ti-button>
搭配图标
<ti-button prefix-icon="home">左图标</ti-button>
<ti-button suffix-icon="arrow-right">右图标</ti-button>
加载状态
<ti-button loading></ti-button>
<ti-button loading loading-size="46">提交</ti-button>
<ti-button loading-type="spinner" loading></ti-button>
<ti-button loading-text="加载中" loading></ti-button>
ti-button API
属性 Properties
| 名称 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| type | string | 否 | primary | 按钮类型，可选值为 primary info error warning success simple | simple仅在variant: outlined 模式下可用，灰色调 |
| size | string | 否 | big | 按钮尺寸，可选值为 tiny small medium big large 分别对应高度48rpx 56rpx 64rpx 80rpx 96rpx | - |
| variant | string | 否 | contained | 按钮风格，可选值为 contained filled outlined text semi-outlined | - |
| color | string | 否 | theme.color.brand.1000 | 按钮颜色，十六进制色值 #ffffff linear-gradient渐变色 | 渐变色仅在variant：contained模式下可用，color的权重高于type |
| shape | string | 否 | round | 按钮圆角风格，可选值为 capsule round rect | - |
| hairline | boolean | 否 | true | 当 size 为 tiny small medium，是否使用发丝 1rpx 边框 | - |
| disabled | boolean | 否 | false | 是否禁用按钮 | - |
| loading | boolean | 否 | false | 是否显示为加载状态 | - |
| block | boolean | 否 | false | 将按钮宽度调整为其父宽度的选项 | - |
| prefix-icon | string | 否 | - | 按钮文字左侧图标 | - |
| suffix-icon | string | 否 | - | 按钮文字右侧图标 | - |
| loading-size | number | 否 | 30 | 加载图标大小，单位 px | - |
| loading-type | string | 否 | circular | 加载图标类型，可选择circular spinner | - |
| loading-text | string | 否 | - | 加载图标文字 | - |
| form-type | string | 否 | - | 用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件 | - |
| open-type | string | 否 | - | 微信开放能力 | - |
| hover-class | string | 否 | active | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 | - |
| hover-start-time | number | 否 | 20 | 按住后多久出现点击态，单位毫秒 | - |
| hover-stay-time | number | 否 | 70 | 手指松开后点击态保留时间，单位毫秒 | - |
| lang | string | 否 | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 | - |
| session-from | string | 否 | - | 会话来源，open-type="contact"时有效 | - |
| send-message-title | string | 否 | - | 会话内消息卡片标题，open-type="contact"时有效 | - |
| send-message-path | string | 否 | - | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | - |
| send-message-img | string | 否 | - | 会话内消息卡片图片，open-type="contact"时有效 | - |
| app-parameter | string | 否 | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp 时有效 | - |
| show-message-card | boolean | 否 | - | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | - |
| dataset | any | 否 | - | 按钮 dataset，open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值 | |
| ext-style | string | Record<string, string> | 否 | - | 根节点样式 | - |
事件 Events
| 名称 | 参数列表 | 描述 | 备注 |
|---|---|---|---|
| onclick | (e: Event) => void | 点击按钮，且按钮状态不为加载或禁用时触发 |
插槽 Slots
| 名称 | 说明 | 备注 |
|---|---|---|
| default | 默认插槽 | - |
外部样式类 External Classes
| 名称 | 说明 | 备注 |
|---|---|---|
| ext-class | 根节点样式类 | - |
| loading-class | 加载图标样式类 | - |
| prefix-icon-class | 左侧图标样式类 | - |
| suffix-icon-class | 右侧图标样式类 | - |
CSS 变量 CSS Variable
| 变量 | 默认值 | 说明 | 备注 |
|---|---|---|---|
--button-padding-v | theme.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-h | theme.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-size | theme.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-radius | theme.borderRadius.r2 | 圆角 | - |
--button-margin | 0 | 整体外边距 | - |
--button-line-height | theme.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-weight | theme.fontWeight.semibold | 字重 | - |
--button-icon-size | theme.fontSize.t6 | icon尺寸（size="tiny"） | - |
theme.fontSize.t8 | icon尺寸（size="small"） | - | |
theme.fontSize.t8 | icon尺寸（size="medium"） | - | |
theme.fontSize.t8 | icon尺寸（size="big"） | - | |
theme.fontSize.t10 | icon尺寸（size="large"） | - | |
--button-icon-gap | theme.spacing.gap.g2 | 文字和图标间距 | - |