Keyboard shortcuts

Press ← or → to navigate between chapters

Press ? to show this help

Press Esc to hide this help

button

按钮。

属性类型默认值必填说明最低版本
sizeStringdefault否按钮的大小 
typeStringdefault否按钮的样式类型 
plainBooleanfalse否按钮是否镂空，背景色透明 
disabledBooleanfalse否是否禁用 
loadingBooleanfalse否名称前是否带 loading 图标 
hover-classStringbutton-hover否指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 
hover-stop-propagationBooleanfalse否指定是否阻止本节点的祖先节点出现点击态 
hover-start-timeNumber20否按住后多久出现点击态，单位毫秒 
hover-stay-timeNumber70否手指松开后点击态保留时间，单位毫秒 

size 的合法值

值说明最低版本
default默认大小 
mini小尺寸 

type 的合法值

值说明最低版本
primary#00cac4 
default白色 
warn红色 

示例代码：

<!--pages/component/pages/button/button.mcml-->
<view class="container">
  <view class="statement">按钮。</view>
  <view class="cssname">size</view>
  <view>
    <button>default</button>
    <button size="mini">mini</button>
  </view>
  <view class="cssname">type</view>
  <view>
    <button type="default">default</button>
    <button type="primary">primary</button>
    <button type="warn">warn</button>

    <button type="default" size="mini">default</button>
    <button type="primary" size="mini">primary</button>
    <button type="warn" size="mini">warn</button>
  </view>
  <view class="cssname">plain</view>
  <view>
    <button type="default" plain>default</button>
    <button type="primary" plain>primary</button>
    <button type="warn" plain>warn</button>

    <button type="default" size="mini" plain>default</button>
    <button type="primary" size="mini" plain>primary</button>
    <button type="warn" size="mini" plain>warn</button>
  </view>
  <view class="cssname">disabled</view>
  <view>
    <button type="default" disabled>default</button>
    <button type="primary" disabled>primary</button>
    <button type="warn" disabled>warn</button>
    <button type="default" plain disabled>default</button>
    <button type="primary" plain disabled>primary</button>
    <button type="warn" plain disabled>warn</button>

    <button type="default" size="mini" disabled>default</button>
    <button type="primary" size="mini" disabled>primary</button>
    <button type="warn" size="mini" disabled>warn</button>
    <button type="default" size="mini" plain disabled>default</button>
    <button type="primary" size="mini" plain disabled>primary</button>
    <button type="warn" size="mini" plain disabled>warn</button>
  </view>
  <view class="cssname">loading</view>
  <view>
    <button type="default" loading>default</button>
    <button type="primary" loading>primary</button>
    <button type="warn" loading>warn</button>
    <button type="default" plain loading>default</button>
    <button type="primary" plain loading>primary</button>
    <button type="warn" plain loading>warn</button>
    <button type="default" loading disabled>default</button>
    <button type="primary" loading disabled>primary</button>
    <button type="warn" loading disabled>warn</button>
    <button type="default" plain loading disabled>default</button>
    <button type="primary" plain loading disabled>primary</button>
    <button type="warn" plain loading disabled>warn</button>

    <button type="default" size="mini" loading>default</button>
    <button type="primary" size="mini" loading>primary</button>
    <button type="warn" size="mini" loading>warn</button>
    <button type="default" size="mini" plain loading>default</button>
    <button type="primary" size="mini" plain loading>primary</button>
    <button type="warn" size="mini" plain loading>warn</button>
    <button type="default" size="mini" loading disabled>default</button>
    <button type="primary" size="mini" loading disabled>primary</button>
    <button type="warn" size="mini" loading disabled>warn</button>
    <button type="default" size="mini" plain loading disabled>default</button>
    <button type="primary" size="mini" plain loading disabled>primary</button>
    <button type="warn" size="mini" plain loading disabled>warn</button>
  </view>
  <view class="cssname">hover-class</view>
  <view>
    <button hover-class="hoverClassInner">hover-class</button>
  </view>
  <view class="cssname">hover-stop-propagation</view>
  <view>
    <view hover-class="hoverClassOuter" >
      我不会被内部按钮触发点击效果
      <button hover-class="hoverClassInner" hover-stop-propagation="{{true}}">hover-class</button>
    </view>
    <view hover-class="hoverClassOuter" >
      我会被内部按钮触发点击效果
      <button hover-class="hoverClassInner" hover-stop-propagation="{{false}}">hover-class</button>
    </view>
  </view>
  
  <view class="cssname">hover-start-time: 1000 ms, hover-stay-time: 1000 ms</view>
  <view>
    <button hover-class="hoverClassInner" hover-start-time="1000" hover-stay-time="1000">hover time</button>
  </view>
</view>