button
按钮。
属性名 | 类型 | 默认值 | 说明 |
size | String | default | 有效值 default, mini |
type | String | default | 按钮的样式类型,有效值 primary, default, warn |
plain | Boolean | false | 按钮是否镂空,背景色透明 |
disabled | Boolean | false | 是否禁用 |
loading | Boolean | false | 名称前是否带 loading 图标 |
form-type | String | 无 | 有效值:submit, reset,用于 <form/> 组件,点击分别会触发 submit/reset 事件 |
hover-class | String | button-hover | 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果 |
注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
<view class="page">
<view class="page__hd">
<text class="page__title">button</text>
<text class="page__desc">按钮</text>
</view>
<view class="page__bd">
<view class="btn-area" id="buttonContainer">
<view class="button-wrapper">
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="default"> default
</button>
</view>
<view class="button-wrapper">
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="primary"> primary
</button>
</view>
<view class="button-wrapper">
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}"
bindtap="warn"> warn
</button>
</view>
<view class="button-wrapper">
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
</view>
<view class="button-wrapper">
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
</view>
<view class="button-wrapper">
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
</view>
</view>
</view>
</view>
posted on 2017-08-21 17:28 taiyang2014 阅读(409) 评论(0) 编辑 收藏 举报