今日头条小程序 > 字节跳动 > button
今日头条小程序,字节跳动,button

button

2019-03-13 11:29:04

按钮。属性名类型默认值说明最低版本sizeStringdefault按钮的大小typeStringdefault按钮的样式类型disabledBooleanfalse是否禁用loadingBooleanfalse是否带loading图标form-typeString用于嵌在form/组件中,控制submit/resetopen-typeString用于调用开放能力hover-classStringbutton-hover点击状态的样式类hoverStartTimeNumber20按住后多久出现点击态,单位毫秒hoverStayTimeNumber70手指松开后点击态保留时间,单位毫秒hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态button-hover的样式为为{background-color:rgba(0,0,0,0.1);opacity:0.7;}size取值范围:值说明default默认大小mini小尺寸type取值范围:值说明primary红色default白色form-type取值范围:值说明submit提交表单reset重置表单open-type有效值:目前只支持share值说明share触发用户转发,分享内容到微头条
示例buttontype=primary页面主操作Normal/buttonbuttontype=primaryloading=true页面主操作Loading/buttonbuttontype=primarydisabled=true页面主操作Disabled/buttonbuttontype=default页面次要操作Normal/buttonbuttontype=defaultloading=true页面次要操作Loading/buttonbuttontype=defaultdisabled=true页面次要操作Disabled/buttonviewclass=mini-buttonsbuttonclass=mini-btntype=primarysize=mini按钮/buttonbuttonclass=mini-btntype=defaultsize=mini按钮/button/view
温馨提示目前,button组件的边框不是通过border属性来控制的,而是有个:after伪类,所以如果需要修改边框样式,请对改伪类元素设置样式buttonclass=my-button边框修改/buttonbuttonclass=my-button-2取消默认边框/button.my-button{border-radius:20px;}.my-button:after{border-color:
f00;border-radius:40px;/*需要设置为按钮圆角的两倍*/}.my-button-2{border:1pxsolid;}.my-button-2:after{display:none;}
标签:组件,字节跳动小程序
今日头条小程序,字节跳动,button

「button」开发组件订阅

方法1:今日头条扫描字节跳动小程序码即可订阅开发组件「button」

方法2:今日头条搜索字节跳动小程序名称进入,即可订阅开发组件「button」

方法3:今日头条网页访问即速商店,长按识别字节跳动小程序码即可订阅开发组件「button」

字节跳动小程序开发组件「button」由字节跳动原创摘录于今日头条小程序商店shop.jisuapp.cn,转载请注明出处。

字节跳动开发组件「button」由字节跳动开发者向今日头条用户提供,并对本服务内容、数据资料及其运营行为等真实性、合法性及有效性承担全部责任。