button
基础库 1.0.0 开始支持本组件。
按钮,用于强调操作并引导用户去点击。
代码示例
属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|---|
size | string | default | 否 | 按钮的大小 | 1.0.0 |
type | string | default | 否 | 按钮的样式类型 | 1.0.0 |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
loading | boolean | false | 否 | 是否带 loading 图标 | 1.0.0 |
form-type | string | 否 | 用于嵌在form 组件中,控制 submit/reset | 1.0.0 | |
open-type | string | 否 | 用于调用开放能力, 详情见下方 | 1.0.0 | |
hover-class | string | button-hover | 否 | 点击状态的样式类 | 1.0.0 |
hover-start-time | number | 20 | 否 | 按住后多久出现点击态,单位毫秒 | 1.0.0 |
hover-stay-time | number | 70 | 否 | 手指松开后点击态保留时间,单位毫秒 | 1.0.0 |
hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 1.0.0 |
bindgetphonenumber | Function | 否 | 获取用户手机号回调,只在 open-type=getPhoneNumber 时有效 | 1.14.0 |
size
取值范围
值 | 说明 | 最低支持版本 |
---|---|---|
default | 默认大小 | 1.0.0 |
mini | 小尺寸 | 1.0.0 |
type
取值范围
值 | 说明 | 最低支持版本 |
---|---|---|
primary | 红色 | 1.0.0 |
default | 白色 | 1.0.0 |
form-type
取值范围
值 | 说明 | 最低支持版本 |
---|---|---|
submit | 提交表单 | 1.0.0 |
reset | 重置表单 | 1.0.0 |
open-type
有效值
值 | 说明 | 最低支持版本 |
---|---|---|
share | 触发用户转发, 可以配合 data-channel 属性来设置分享的 channel,具体请参考ShareParam | 1.0.0 |
getPhoneNumber | 获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息,详细说明 | 1.14.0 |
contact | 跳转到客服页面,详细说明 | 1.44.0 |
扫码体验
请使用字节宿主APP扫码
Bug & Tip
- Tip:目前,
<button>
组件的边框不是通过border
属性来控制的,而是有个:after
伪类,所以如果需要修该边框样式,请对该伪类元素设置样式。 - Tip:
button-hover
的样式为{ background-color: rgba(0, 0, 0, 0.1); opacity: 0.7; }
。
点击纠错
评价此篇文档