跳到主要内容

按钮 Button

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

用法示例

按钮类型

<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

名称类型必填默认值说明备注
typestringprimary按钮类型,可选值为 primary info error warning success simplesimple仅在variant: outlined 模式下可用,灰色调
sizestringbig按钮尺寸,可选值为 tiny small medium big large 分别对应高度48rpx 56rpx 64rpx 80rpx 96rpx-
variantstringcontained按钮风格,可选值为 contained filled outlined text-
colorstring-按钮颜色,十六进制色值 #ffffff linear-gradient渐变色渐变色仅在variant:contained模式下可用,color的权重高于type
shapestringround按钮圆角风格,可选值为 capsule round rect-
hairlinebooleanfalse当 size 为 tiny small medium,是否使用发丝 1rpx 边框-
disabledbooleanfalse是否禁用按钮-
loadingbooleanfalse是否显示为加载状态-
blockbooleanfalse将按钮宽度调整为其父宽度的选项-
prefix-iconstring-按钮文字左侧图标-
suffix-iconstring-按钮文字右侧图标-
loading-sizenumber30加载图标大小,单位 px-
loading-typestringcircular加载图标类型,可选择circular spinner-
loading-textstring-加载图标文字-
form-typestring-用于 form 组件,可选值为submit reset,点击分别会触发 form 组件的 submit/reset 事件-
open-typestring-微信开放能力-
hover-classstringactive指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果-
hover-start-timenumber20按住后多久出现点击态,单位毫秒-
hover-stay-timenumber70手指松开后点击态保留时间,单位毫秒-
langstringen指定返回用户信息的语言,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

名称参数列表描述备注
onclick(e: Event) => void点击按钮,且按钮状态不为加载或禁用时触发

插槽 Slots

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

外部样式类 External Classes

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

CSS 变量 CSS Variable

变量 默认值说明备注
--button-height不同size,默认高度不同。tiny small medium big large分别对应48rpx 56rpx 64rpx 80rpx 96rpx高度-
--button-padding-v0垂直方向内边距-
--button-padding-h不同size,默认左右内边距不同。tiny small medium big large分别对应12rpx 20rpx 24rpx 28rpx 36rpx水平方向内边距-
--button-font-size不同size,默认字号不同。tiny small medium big large分别对应24rpx 26rpx 26rpx 28rpx 32rpx字号-
--button-radiuscalc(var(--capsule-radius-size, 0rpx) + 8rpx)圆角,修改后不在跟随全局风格-
--capsule-radius-size0rpx全局圆角增量,控制图标风格。在项目根节点统一设置-