button

按钮。

属性	类型	默认值	必填	说明	最低版本
size	String	default	否	按钮的大小
type	String	default	否	按钮的样式类型
plain	Boolean	false	否	按钮是否镂空，背景色透明
disabled	Boolean	false	否	是否禁用
loading	Boolean	false	否	名称前是否带 loading 图标
hover-class	String	button-hover	否	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	20	否	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	否	手指松开后点击态保留时间，单位毫秒

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>

results matching ""

No results matching ""

results matching ""

No results matching ""