alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

done

Browse Source
This commit is contained in:
zhuxiang
2017-03-07 15:00:05 +08:00
parent 847e509244 3e474ef451
commit fdf2868cc7
149 changed files with 3024 additions and 78304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples-docs/badge.md
+2
View File
@@ -2,6 +2,7 @@
### 基础用法
:::demo 基础用法
```html
<zan-badge-group active-key="2">
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
@@ -10,6 +11,7 @@
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
</zan-badge-group>
```
:::
### z-badge-group API
docs/examples-docs/button.md
+80 -37
View File
@@ -1,80 +1,123 @@
<style>
@component-namespace demo {
@b button {
.zan-row {
padding: 0 20px;
}
.zan-col {
margin-bottom: 10px;
}
.button-group {
font-size: 0;
padding: 0 20px;
}
}
}
</style>
## Button组件
### 按钮功能
只接受primary, default, danger三种类型，默认default。
:::demo 按钮功能
```html
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button>default</zan-button>
</div>
<div class="zan-button-1">
<zan-button type="primary">primary</zan-button>
</div>
<div class="zan-button-1">
<zan-button type="danger">danger</zan-button>
</div>
</div>
<zan-row>
<zan-col span="24">
<zan-button block>default</zan-button>
</zan-col>
<zan-col span="24">
<zan-button type="primary" block>primary</zan-button>
</zan-col>
<zan-col span="24">
<zan-button type="danger" block>danger</zan-button>
</zan-col>
</zan-row>
```
:::
### 禁用状态
:::demo 禁用状态
```html
<div class="zan-button-group">
<div class="zan-button-1">
<zan-button disabled>diabled</zan-button>
</div>
</div>
<zan-row>
<zan-col span="24">
<zan-button disabled block>diabled</zan-button>
</zan-col>
</zan-row>
```
:::
### 按钮尺寸
只接受large, normal, small, mini四种尺寸，默认normal。
:::demo 按钮尺寸
```html
<div class="zan-button-group">
<div class="zan-button-1">
<zan-row>
<zan-col span="24">
<zan-button size="large">large</zan-button>
</div>
</div>
<div class="zan-button-group" :style="{ width: '50%' }">
<div class="zan-button-3">
<zan-button type="primary">normal</zan-button>
</div>
<div class="zan-button-3">
<zan-button size="small">small</zan-button>
</div>
<div class="zan-button-3">
<zan-button size="mini">mini</zan-button>
</div>
</div>
</zan-col>
</zan-row>
<zan-row gutter="10">
<zan-col span="8">
<zan-button type="primary" block>normal</zan-button>
</zan-col>
<zan-col span="8">
<zan-button size="small" block>small</zan-button>
</zan-col>
<zan-col span="8">
<zan-button size="mini" block>mini</zan-button>
</zan-col>
</zan-row>
```
:::
### 自定义按钮标签
按钮默认是button标签，可以使用tag属性修改为一个a标签。
:::demo 自定义按钮标签
```html
<div class="zan-button-group">
<div class="zan-button-1">
<zan-row>
<zan-col span="24">
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
</div>
</div>
</zan-col>
</zan-row>
```
:::
### loading按钮
表示loading状态
:::demo loading按钮
```html
<zan-row>
<zan-col span="24">
<zan-button type="primary" loading block>loading</zan-button>
</zan-col>
<zan-col span="24">
<zan-button loading block></zan-button>
</zan-col>
</zan-row>
```
:::
### button group
一组按钮。
:::demo button group
```html
<div class="zan-button-group">
<div class="button-group">
<zan-button type="primary" size="small">确认付款</zan-button>
<zan-button size="small">确认收货</zan-button>
<zan-button size="small">取消订单</zan-button>
</div>
```
:::
### API
docs/examples-docs/card.md
+4 -1
View File
@@ -4,19 +4,21 @@
当没有底部按钮时，右侧内容会居中显示。
:::demo 基础用法
```html
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="描述"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</zan-card>
```
:::
### 高级用法
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
:::demo 高级用法
```html
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
@@ -36,6 +38,7 @@
</div>
</zan-card>
```
:::
### API
docs/examples-docs/cell.md
+10
View File
@@ -20,50 +20,59 @@ export default {
### 基础用法
:::demo 基础用法
```html
<zan-cell-group>
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
</zan-cell-group>
```
:::
### 标题带描述信息
传入`label`属性，属性值为描述信息的值。
:::demo 标题带描述信息
```html
<zan-cell-group>
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
<zan-cell title="单元格2" label="描述信息"></zan-cell>
</zan-cell-group>
```
:::
### 带图标
传入`icon`属性。
:::demo 带图标
```html
<zan-cell-group>
<zan-cell title="起码运动馆" icon="home"></zan-cell>
<zan-cell title="线下门店" icon="location"></zan-cell>
</zan-cell-group>
```
:::
### 可点击的链接
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
:::demo 可点击的链接
```html
<zan-cell-group>
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
```
:::
### 高级用法
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
:::demo 高级用法
```html
<zan-cell-group>
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
@@ -75,6 +84,7 @@ export default {
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
</zan-cell-group>
```
:::
### API
docs/examples-docs/checkbox.md
+63 -8
View File
@@ -1,9 +1,49 @@
<style>
@component-namespace demo {
@b checkbox {
.zan-checkbox-wrapper {
padding: 0 20px;
.zan-checkbox {
margin: 10px 0;
}
}
}
}
</style>
<script>
export default {
data() {
return {
checkbox1: true,
checkbox2: true,
list: [
'a',
'b',
'c'
],
result: ['a', 'b']
};
},
watch: {
result(val) {
console.log(val);
}
}
};
</script>
## Checkbox组件
### 基础用法
:::demo 基础用法
```html
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
<div class="zan-checkbox-wrapper">
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
</div>
<script>
export default {
@@ -15,11 +55,15 @@ export default {
};
</script>
```
:::
### 禁用状态
:::demo 禁用状态
```html
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
<div class="zan-checkbox-wrapper">
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
</div>
<script>
export default {
@@ -31,13 +75,17 @@ export default {
};
</script>
```
:::
### Checkbox组
:::demo Checkbox组
```html
<zan-checkbox-group v-model="result">
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<div class="zan-checkbox-wrapper">
<zan-checkbox-group v-model="result">
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
</div>
<script>
export default {
@@ -60,13 +108,17 @@ export default {
};
</script>
```
:::
### 禁用Checkbox组
:::demo 禁用Checkbox组
```html
<zan-checkbox-group v-model="result" disabled>
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<div class="zan-checkbox-wrapper">
<zan-checkbox-group v-model="result" disabled>
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
</div>
<script>
export default {
@@ -83,9 +135,11 @@ export default {
};
</script>
```
:::
### 与Cell组件一起使用
:::demo 与Cell组件一起使用
```html
<zan-checkbox-group v-model="result">
<zan-cell-group>
@@ -110,6 +164,7 @@ export default {
};
</script>
```
:::
### Checkbox API
docs/examples-docs/dialog.md
+2
View File
@@ -30,6 +30,7 @@ export default {
### 基础用法
:::demo 基础用法
```html
<zan-button @click="handleAlertClick">alert</zan-button>
@@ -63,6 +64,7 @@ export default {
};
</script>
```
:::
### API
docs/examples-docs/field.md
+6
View File
@@ -6,6 +6,7 @@
根据`type`属性显示不同的输入框。
:::demo 基础用法
```html
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
@@ -13,26 +14,31 @@
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
</zan-cell-group>
```
:::
### 无label的输入框
不传入`label`属性即可。
:::demo 无label的输入框
```html
<zan-cell-group>
<zan-field type="text" placeholder="请输入用户名"></zan-field>
</zan-cell-group>
```
:::
### 监听change事件
监听组件的`change`事件。
:::demo 监听change事件
```html
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
</zan-cell-group>
```
:::
### API
docs/examples-docs/image-preview.md
+3
View File
@@ -0,0 +1,3 @@
## ImagePreview 图片预览
docs/examples-docs/install.md
+7
View File
@@ -0,0 +1,7 @@
## 安装
### ynpm安装
```shell
npm i @youzan/zanui-vue -S
```
docs/examples-docs/layout.md
View File
docs/examples-docs/loading.md
+40 -9
View File
@@ -1,14 +1,45 @@
l## Switch组件
<style>
.demo-loading__example{
width: 30px;
height: 30px;
padding: 20px;
margin: auto;
border-radius: 5px;
border: 1px solid transparent;
}
.demo-loading__example--with-bg {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-loading {
padding: 0 20px;
}
</style>
## Loading
### 基础用法
:::demo 基础用法
```html
<template>
<div class="page-loading">
<h1 class="page-title">Loading</h1>
<h2 class="page-sub-title">Loading展示</h2>
<div class="page-loading__example1">
<zan-loading class="some-customized-class" style="padding-top: 50px; text-align: center;"></zan-loading>
</div>
<div class="demo-loading">
<h2 class="demo-sub-title">渐变深色spinner</h2>
<div class="demo-loading__example">
<zan-loading class="some-customized-class"></zan-loading>
</div>
</template>
<h2 class="demo-sub-title">渐变浅色spinner</h2>
<div class="demo-loading__example demo-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
</div>
<h2 class="demo-sub-title">单色spinner</h2>
<div class="demo-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
</div>
<h2 class="demo-sub-title">单色spinner</h2>
<div class="demo-loading__example">
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
</div>
</div>
```
:::
docs/examples-docs/panel.md
+37 -19
View File
@@ -1,38 +1,55 @@
<style>
@component-namespace demo {
@b panel {
.zan-panel-sum {
background: #fff;
text-align: right;
font-size: 14px;
color: #333;
line-height: 30px;
padding-right: 15px;
span {
color: red;
}
}
.zan-panel-buttons {
text-align: right;
.zan-button {
margin-left: 5px;
}
}
.panel-content {
padding: 20px;
}
}
}
</style>
## Panel 面板
面板只是一个容器，里面可以放入自定义的内容。
### 基础用法
:::demo 基础用法
```html
<zan-panel title="标题" desc="标题描述" status="状态">
<zan-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="zan-card__row" slot="title">
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="zan-card__price">¥ 2.00</span>
</div>
<div class="zan-card__row" slot="desc">
<h4 class="zan-card__desc">商品sku</h4>
<span class="zan-card__num">x 2</span>
</div>
<div class="zan-card__footer" slot="footer">
<zan-button size="mini">按钮一</zan-button>
<zan-button size="mini">按钮二</zan-button>
</div>
</zan-card>
<div class="zan-panel-sum">
合计：<span>¥ 1999.90</span>
<div class="panel-content">
panel内容
</div>
</zan-panel>
```
:::
### 高级用法
使用具名`slot`自定义内容。
:::demo 高级用法
```html
<zan-panel title="标题" desc="标题描述" status="状态">
<zan-card
@@ -61,6 +78,7 @@
</div>
</zan-panel>
```
:::
### API
docs/examples-docs/picker.md
+33
View File
@@ -1,12 +1,45 @@
<script>
const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
};
export default {
data() {
return {
pickerColumns: [
{
values: Object.keys(citys),
className: 'column1'
},
{
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
className: 'column2'
}
]
};
},
methods: {
handlePickerChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
}
}
};
</script>
## Picker组件
模仿iOS中的`UIPickerView`。
### 基础用法
:::demo 基础用法
```html
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
```
:::
### API
docs/examples-docs/popup.md
+29 -4
View File
@@ -1,30 +1,54 @@
<script>
export default {
data() {
return {
popupShow1: false,
popupShow2: false,
popupShow3: false,
popupShow4: false
}
},
watch: {
popupShow2(val) {
if (val) {
setTimeout(() => {
this.popupShow2 = false;
}, 2000);
}
}
}
};
</script>
## Popup组件
### 基础用法
:::demo 基础用法
```html
<div class="zan-button-1">
<div class="zan-row">
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
xxxx
</zan-popup>
<div class="zan-button-1">
<div class="zan-row">
<zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
更新成功
</zan-popup>
<div class="zan-button-1">
<div class="zan-row">
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
</zan-popup>
<div class="zan-button-1">
<div class="zan-row">
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
@@ -54,6 +78,7 @@ export default {
};
</script>
```
:::
### API
docs/examples-docs/quickstart.md
+23
View File
@@ -0,0 +1,23 @@
## 快速上手
### 完整引入
```javascript
import Vue from 'vue';
import ZanUI from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/index.css';
Vue.use(ZanUI);
```
### 按需引入
```javascript
import Vue from 'vue';
import { Button, Cell } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/button.css';
import '@youzan/zanui-vue/lib/zanui-css/cell.css';
Vue.component(Button.name, Button);
Vue.component(Cell.name, Cell);
```
docs/examples-docs/radio.md
+41 -10
View File
@@ -1,8 +1,25 @@
<style>
@component-namespace demo {
@b radio {
.zan-radios {
padding: 0 20px;
.zan-radio {
margin: 10px 0;
}
}
}
}
</style>
<script>
export default {
data() {
return {
radio: '1'
radio1: '1',
radio2: '2',
radio3: '1',
radio4: '1'
};
}
};
@@ -12,9 +29,12 @@ export default {
### 基础用法
:::demo 基础用法
```html
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
<div class="zan-radios">
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
</div>
<script>
export default {
@@ -26,12 +46,16 @@ export default {
};
</script>
```
:::
### 禁用状态
:::demo 禁用状态
```html
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
<div class="zan-radios">
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
</div>
<script>
export default {
@@ -43,15 +67,19 @@ export default {
};
</script>
```
:::
### radio组
:::demo radio组
```html
<zan-radio-group v-model="radio3">
<zan-radio name="1">单选框1</zan-radio>
<zan-radio name="2">单选框2</zan-radio>
</zan-radio-group>
<div class="zan-radios">
<zan-radio-group v-model="radio3">
<zan-radio name="1">单选框1</zan-radio>
<zan-radio name="2">单选框2</zan-radio>
</zan-radio-group>
</div>
<script>
export default {
data() {
@@ -62,9 +90,11 @@ export default {
};
</script>
```
:::
### 与Cell组件一起使用
:::demo 与Cell组件一起使用
```html
<zan-radio-group v-model="radio4">
<zan-cell-group>
@@ -83,6 +113,7 @@ export default {
};
</script>
```
:::
### Radio API
docs/examples-docs/search.md
+20 -14
View File
@@ -1,17 +1,4 @@
## Search 组件
### 基础用法
```html
<zan-search
placeholder="商品名称"
@search="goSearch"
>
</zan-search>
```
```javascript
<script>
export default {
methods: {
goSearch(value) {
@@ -19,7 +6,26 @@ export default {
}
}
};
</script>
## Search 组件
### 基础用法
:::demo 基础用法
```html
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
<script>
export default {
methods: {
goSearch(value) {
alert(value)
}
}
};
</script>
```
:::
### API
docs/examples-docs/steps.md
+89
View File
@@ -1,4 +1,93 @@
<style>
@component-namespace demo {
@b steps {
.steps-success {
color: #06bf04;
}
.zan-button {
margin-left: 15px;
}
}
}
</style>
<script>
export default {
data() {
return {
active: 0
};
},
methods: {
nextStep() {
if (++this.active > 3) this.active = 0;
}
}
}
</script>
## Steps 步骤条
### 基础用法
:::demo 基础用法
```html
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
<zan-step>买家下单</zan-step>
<zan-step>商家接单</zan-step>
<zan-step>买家提货</zan-step>
<zan-step>交易完成</zan-step>
</zan-steps>
<zan-button @click="nextStep">下一步</zan-button>
<script>
export default {
data() {
return {
active: 0
};
},
methods: {
nextStep() {
if (++this.active > 3) this.active = 0;
}
}
}
</script>
```
:::
### 只显示步骤条
:::demo 只显示步骤条
```html
<zan-steps :active="active">
<zan-step>买家下单</zan-step>
<zan-step>商家接单</zan-step>
<zan-step>买家提货</zan-step>
<zan-step>交易完成</zan-step>
</zan-steps>
```
:::
### Steps API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| active | 当前激活的步骤，从0开始 | Number | '' | '' |
| icon | 当前步骤的icon | string | '' | '' |
| iconClass | 当前步骤栏为icon添加的类 | string | '' | '' |
| title | 当前步骤从标题 | string | '' | '' |
| description | 当前步骤描述 | string | '' | '' |
### Steps Slot
| 名称 | 说明 |
|-----------|-----------|
| message-extra | 状态栏添加额外的元素 |
docs/examples-docs/switch.md
+40 -25
View File
@@ -1,33 +1,47 @@
<style>
@component-namespace demo {
@b switch {
padding: 0 15px 15px;
@e wrapper {
width: 33.33%;
float: left;
text-align: center;
}
@e text {
margin: 20px 0;
}
}
}
</style>
## Switch组件
### 基础用法
:::demo 基础用法
```html
<div class="page-switch">
<h1 class="page-title">Switch</h1>
<h2 class="page-sub-title">基础用法</h2>
<div class="page-switch">
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
<div class="page-switch__text">{{switchStateText}}</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="page-switch__text">ON, DISABLED</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="page-switch__text">OFF, DISABLED</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="page-switch__text">ON, LOADING</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="page-switch__text">OFF, LOADING</div>
</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
<div class="demo-switch__text">{{switchStateText}}</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="demo-switch__text">OFF, DISABLED</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="demo-switch__text">OFF, LOADING</div>
</div>
<script>
@@ -50,6 +64,7 @@ export default {
};
</script>
```
:::
### API
docs/examples-docs/tag.md
+40 -5
View File
@@ -1,17 +1,52 @@
<style>
.tags-container {
padding: 5px 15px;
.zan-tag + .zan-tag {
margin-left: 10px;
}
}
</style>
## Tag 组件
### 基础用法
:::demo 基础用法
```html
<zan-tag>返现</zan-tag>
<zan-tag :plain="true">返现</zan-tag>
<div class="tags-container">
<zan-tag>返现</zan-tag>
<zan-tag :plain="true">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag type="danger">四字标签</zan-tag>
<zan-tag type="danger">一</zan-tag>
</div>
```
:::
### 高级用法
:::demo 高级用法
```html
<zan-tag type="danger">返现</zan-tag>
<zan-tag type="success">返现</zan-tag>
<zan-tag type="success" :plain="true">返现</zan-tag>
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag :plain="true" type="danger">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="primary">返现</zan-tag>
<zan-tag :plain="true" type="primary">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="success">返现</zan-tag>
<zan-tag :plain="true" type="success">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger" :mark="true">返现</zan-tag>
</div>
```
:::
### API
docs/examples-docs/waterfall.md
+2
View File
@@ -2,6 +2,7 @@
### 基础用法
:::demo 基础用法
```html
<div class="waterfall">
<div
@@ -62,6 +63,7 @@ export default {
};
</script>
```
:::
### API