button

按钮。

属性名类型默认值说明最低版本
sizeStringdefault按钮的大小
typeStringdefault按钮的样式类型
disabledBooleanfalse是否禁用
loadingBooleanfalse是否带loading图标
form-typeString用于嵌在<form/>组件中，控制submit/reset
open-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触发用户转发, 分享内容到微头条

示例

  1. <button type="primary">页面主操作 Normal</button>
  2. <button type="primary" loading="true">页面主操作 Loading</button>
  3. <button type="primary" disabled="true">页面主操作 Disabled</button>
  5. <button type="default">页面次要操作 Normal</button>
  6. <button type="default" loading="true">页面次要操作 Loading</button>
  7. <button type="default" disabled="true">页面次要操作 Disabled</button>
  9. <view class="mini-buttons">
  10.     <button class="mini-btn" type="primary" size="mini">按钮</button>
  11.     <button class="mini-btn" type="default" size="mini">按钮</button>
  12. </view>

button - 图1

温馨提示

目前，<button>组件的边框不是通过border属性来控制的，而是有个:after伪类，所以如果需要修改边框样式，请对改伪类元素设置样式

  1. <button class="my-button">边框修改</button>
  2. <button class="my-button-2">取消默认边框</button>
  1. .my-button {
  2.     border-radius: 20px;
  3. }
  4. .my-button:after {
  5.     border-color: #f00;
  6.     border-radius: 40px; /* 需要设置为按钮圆角的两倍 */
  7. }
  9. .my-button-2 {
  10.     border: 1px solid;
  11. }
  12. .my-button-2:after {
  13.     display: none;
  14. }

button - 图2

原文: https://developer.toutiao.com/docs/comp/button.html