blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

button、tag使用说明 (#170)

Browse Source 
[new feature] button、tag新增使用说明
This commit is contained in:
zhaolong06 2018-03-27 17:44:44 +08:00 committed by Yao
parent bde5732dc2
commit fc9dd3f3bf
4 changed files with 70 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/btn/README.md
View File

@ -1,42 +1,60 @@
## Button 按钮 ## Button 按钮
### 使用指南 ### 使用指南
在 app.wxss 中引入组件库所有样式 在 json 文件中配置button组件
```css ```json
@import "path/to/zanui-weapp/dist/index.wxss"; "usingComponents": {
"zan-button": "/dist/btn/index"
}
``` ```
### 属性
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|---------|---------|----------|------|-------|
| type | String | 否 | 空 | 按钮类型，值有primary、warn、danger |
| size | String | 否 | 空 | 按钮大小，值有large、small、mini |
| plain | Boolean | 否 | false | 按钮是否镂空，默认为false |
| disabled | Boolean | 否 | false | 按钮是否禁用，默认为false |
| loading | Boolean | 否 | false | 按钮加载状态，默认为false |
### 代码演示 ### 代码演示
#### 基础用法 #### 基础用法
```html ```html
<button class="zan-btn">取消订单</button> <zan-button>取消订单</zan-button>
``` ```
#### 按钮类型 #### 按钮类型
按钮支持额外的三种类型 primary, danger, warn 按钮支持额外的三种类型 primary, danger, warn
```html ```html
<button class="zan-btn zan-btn--primary">确认付款</button> <zan-button type="primary">确认付款</zan-button>
<button class="zan-btn zan-btn--danger">确认付款</button> <zan-button type="danger">确认付款</zan-button>
<button class="zan-btn zan-btn--warn">确认付款</button> <zan-button type="warn">确认付款</zan-button>
``` ```
#### 按钮大小 #### 按钮大小
按钮支持额外三种大小 large, small, mini 按钮支持额外三种大小 large, small, mini
```html ```html
<button class="zan-btn zan-btn--large">确认付款</button> <zan-button type="large">确认付款</zan-button>
<button class="zan-btn zan-btn--small">取消订单</button> <zan-button type="small">取消订单</zan-button>
<button class="zan-btn zan-btn--mini">确认付款</button> <zan-button type="mini">确认付款</zan-button>
``` ```
#### 其他 #### 其他
按钮支持镂空状态，可以直接使用 zan-btn--plain 按钮镂空状态
```html ```html
<button class="zan-btn zan-btn--primary zan-btn--plain">确认付款</button> <zan-button plain>确认付款</zan-button>
``` ```
同时支持加载状态，可以使用 zan-btn--loading 获得
按钮加载状态
```html ```html
<button class="zan-btn zan-btn--loading">确认付款</button> <zan-button loading>确认付款</zan-button>
```
按钮禁用状态
```html
<zan-button disabled>确认付款</zan-button>
``` ```
![](https://img.yzcdn.cn/public_files/2017/02/08/1b1e39ed3dc6b63519a68ba1e2650cfc.png) ![](https://img.yzcdn.cn/public_files/2017/02/08/1b1e39ed3dc6b63519a68ba1e2650cfc.png)

4
packages/btn/index.js
View File

@ -10,6 +10,10 @@ Component({
type: String, type: String,
value: '', value: '',
}, },
plain: {
type: Boolean,
value: false,
},
disabled: { disabled: {
type: Boolean, type: Boolean,
value: false, value: false,

2
packages/btn/index.wxml
View File

@ -1,6 +1,6 @@
<button <button
class="custom-class zan-btn {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}" class="custom-class zan-btn {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
disabled="{{disabled}}" disabled="{{disabled}}"
> >
<slot></slot> <slot></slot>

46
packages/tag/README.md
View File

@ -1,25 +1,45 @@
## Tag 标签 ## Tag 标签
### 使用指南 ### 使用指南
在 app.wxss 中引入组件库所有样式 在 json 文件中配置tag组件
```css ```json
@import "path/to/zanui-weapp/dist/index.wxss"; "usingComponents": {
"zan-tag": "/dist/tag/index"
}
``` ```
### 属性
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|---------|---------|----------|------|-------|
| type | String | 否 | 空 | tag类型，值有primary、warn、danger |
| plain | Boolean | 否 | false | tag是否镂空，默认为false |
| disabled | Boolean | 否 | false | tag是否禁用，默认为false |
### 代码演示 ### 代码演示
直接在元素上添加`zan-tag`类即可。同时支持 danger, warn, primary 三种主题色。
添加`zan-tag--disabled`以后，会以不可用形式展示 #### 基础用法
```html ```html
<view class="zan-tag">灰色</view> <zan-tag>取消订单</zan-tag>
<view class="zan-tag zan-tag--danger">会员折扣</view>
<view class="zan-tag zan-tag--warn">返现</view>
<view class="zan-tag zan-tag--primary">返现</view>
<!-- 不可用样式 -->
<view class="zan-tag zan-tag--disabled">不可用</view>
``` ```
添加`zan-tag--plain`以后，即可展示镂空样式标签 #### 类型
tag支持额外的三种类型 primary, danger, warn
```html ```html
<view class="zan-tag zan-tag--warn zan-tag--plain">返现</view> <zan-tag type="primary">会员折扣</zan-tag>
<zan-tag type="danger">返现</zan-tag>
<zan-tag type="warn">返现</zan-tag>
``` ```
#### 其他
tag镂空状态
```html
<zan-tag plain>返现</zan-tag>
```
tag禁用状态
```html
<zan-tag disabled>不可用</zan-tag>
```