ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-17 08:37:23 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into hotfix/waterfall

Browse Source
This commit is contained in:
pangxie1991
2017-02-27 10:35:19 +08:00
parent 787ff255b8 a8bbc42cda
commit 7d95d626a5
91 changed files with 939 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
docs/ExamplesApp.vue Normal file
View File

2
docs/App.vue → docs/ExamplesDocsApp.vue
View File

@@ -21,6 +21,8 @@ export default {
</script>
<style lang="css">
@import './assets/docs.css';
.page-container {
width: 1140px;
padding: 0 30px;

33
docs/examples/button.md → docs/examples-docs/button.md
View File

@@ -1,7 +1,7 @@
<style lang="css">
@component-namespace z {
@component button-group {
.z-button-1-1 {
.z-button-1 {
margin-bottom: 15px;
}
}
@@ -15,13 +15,13 @@
:::demo 只接受primary, default, danger三种类型，默认default
```html
<div class="z-button-group">
<div class="z-button-1-1">
<div class="z-button-1">
<z-button>default</z-button>
</div>
<div class="z-button-1-1">
<div class="z-button-1">
<z-button type="primary">primary</z-button>
</div>
<div class="z-button-1-1">
<div class="z-button-1">
<z-button type="danger">danger</z-button>
</div>
</div>
@@ -33,7 +33,7 @@
:::demo
```html
<div class="z-button-group">
<div class="z-button-1-1">
<div class="z-button-1">
<z-button disabled>diabled</z-button>
</div>
</div>
@@ -45,18 +45,18 @@
:::demo 只接受large, normal, small, mini四种尺寸，默认normal
```html
<div class="z-button-group">
<div class="z-button-1-1">
<div class="z-button-1">
<z-button size="large">large</z-button>
</div>
</div>
<div class="z-button-group" :style="{ width: '50%' }">
<div class="z-button-3-1">
<div class="z-button-3">
<z-button type="primary">normal</z-button>
</div>
<div class="z-button-3-1">
<div class="z-button-3">
<z-button size="small">small</z-button>
</div>
<div class="z-button-3-1">
<div class="z-button-3">
<z-button size="mini">mini</z-button>
</div>
</div>
@@ -66,16 +66,27 @@
### 自定义按钮标签
:::demo 有时按钮需要是一个a标签
:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
```html
<div class="z-button-group">
<div class="z-button-1-1">
<div class="z-button-1">
<z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
</div>
</div>
```
:::
### button group
:::demo 一组按钮
```html
<div class="z-button-group">
<z-button type="primary" size="small">确认付款</z-button>
<z-button size="small">确认收货</z-button>
<z-button size="small">取消订单</z-button>
</div>
```
:::
### API

60
docs/examples-docs/card.md Normal file
View File

@@ -0,0 +1,60 @@
## Card 图文组件
### 基础用法
当没有底部按钮时，右侧内容会居中显示。
:::demo 不带底部按钮时，右侧内容会居中显示。
```html
<z-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="描述"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</z-card>
```
:::
### 高级用法
可以使用具名`slot`自定义对应的内容。
:::demo 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
```html
<z-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="z-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span>
</div>
<div class="z-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span>
</div>
<div class="z-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button>
<z-button size="mini">按钮二</z-button>
</div>
</z-card>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| thumb | 左侧图片 | string | '' | '' |
| title | 标题 | string | '' | '' |
| desc | 描述 | string | '' | '' |
### Slot
| name | 描述 |
|-----------|-----------|
| title | 自定义标题 |
| desc | 自定义描述 |
| tags | 自定义tags |
| footer | 自定义footer |

0
docs/examples/cell.md → docs/examples-docs/cell.md
View File

0
docs/examples/checkbox.md → docs/examples-docs/checkbox.md
View File

0
docs/examples/dialog.md → docs/examples-docs/dialog.md
View File

0
docs/examples/field.md → docs/examples-docs/field.md
View File

107
docs/examples-docs/panel.md Normal file
View File

@@ -0,0 +1,107 @@
<style>
.z-panel-sum {
background: #fff;
text-align: right;
font-size: 14px;
color: #333;
line-height: 30px;
padding-right: 15px;
span {
color: red;
}
}
.z-panel-buttons {
text-align: right;
.z-button {
margin-left: 5px;
}
}
</style>
## Panel 面板
面板只是一个容器，里面可以放入自定义的内容。
### 基础用法
:::demo
```html
<z-panel title="标题" desc="标题描述" status="状态">
<z-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="z-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span>
</div>
<div class="z-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span>
</div>
<div class="z-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button>
<z-button size="mini">按钮二</z-button>
</div>
</z-card>
<div class="z-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
</z-panel>
```
:::
### 高级用法
使用具名`slot`自定义内容。
:::demo
```html
<z-panel title="标题" desc="标题描述" status="状态">
<z-card
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="商品SKU1，商品SKU2"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="z-card__row" slot="title">
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
<span class="z-card__price">¥ 2.00</span>
</div>
<div class="z-card__row" slot="desc">
<h4 class="z-card__desc">商品sku</h4>
<span class="z-card__num">x 2</span>
</div>
<div class="z-card__footer" slot="footer">
<z-button size="mini">按钮一</z-button>
<z-button size="mini">按钮二</z-button>
</div>
</z-card>
<div class="z-panel-sum">
合计：<span>¥ 1999.90</span>
</div>
<div class="z-panel-buttons" slot="footer">
<z-button size="small">按钮一</z-button>
<z-button size="small" type="danger">按钮二</z-button>
</div>
</z-panel>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | string | '' | '' |
| desc | 描述 | string | '' | '' |
| status | 状态 | string | '' | '' |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义内容 |
| header | 自定义header |
| footer | 自定义footer |

0
docs/examples/picker.md → docs/examples-docs/picker.md
View File

0
docs/examples/popup.md → docs/examples-docs/popup.md
View File

0
docs/examples/radio.md → docs/examples-docs/radio.md
View File

12
docs/examples/switch.md → docs/examples-docs/switch.md
View File

@@ -43,13 +43,17 @@ export default {
:::demo 样例代码
```html
<div class="page-switch">
<div class="page-switch-wrapper">
<div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
<div class="page-switch-text">{{switchStateText}}</div>
<div class="page-switch__text">{{switchStateText}}</div>
</div>
<div class="page-switch-wrapper">
<div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
<div class="page-switch-text">OFF, DISABLED</div>
<div class="page-switch__text">ON, DISABLED</div>
</div>
<div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
<div class="page-switch__text">OFF, DISABLED</div>
</div>
</div>
```

0
docs/examples/waterfall.md → docs/examples-docs/waterfall.md
View File

0
docs/examples.js Normal file
View File

10
docs/examples/button.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<div class="button-demos">
</div>
</template>
<script>
export default {
};
</script>

5
docs/index.js
View File

@@ -1,12 +1,13 @@
import './assets/docs.css';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';
import App from './ExamplesDocsApp';
import routes from './router.config';
import demoBlock from './components/demo-block';
import SideNav from './components/side-nav';
import Oxygen from '../src/index';
import 'packages/zanui-css/src/index.css';
Vue.use(Oxygen);
Vue.use(VueRouter);
Vue.component('demo-block', demoBlock);

28
docs/nav.config.json
View File

@@ -14,17 +14,33 @@
"path": "/cell",
"title": "Cell"
},
{
"path": "/loading",
"title": "Loading"
},
{
"path": "/progress",
"title": "Progress"
},
{
"path": "/panel",
"title": "Panel"
},
{
"path": "/card",
"title": "Card"
},
{
"path": "/loading",
"title": "Loading"
},
{
"path": "/steps",
"title": "Steps"
},
{
"path": "/badge",
"title": "Badge"
},
{
"path": "/search",
"title": "Search"
}
]
},
@@ -92,10 +108,6 @@
"path": "/waterfall",
"title": "Waterfall"
},
{
"path": "/dialog",
"title": "Dialog"
},
{
"path": "/img-preview",
"title": "Img Preview"

2
docs/router.config.js
View File

@@ -23,7 +23,7 @@ const registerRoute = (navConfig) => {
route.push({
path: '/component' + page.path,
component: function(resolve) {
require([`./examples${page.path}.md`], resolve);
require([`./examples-docs${page.path}.md`], resolve);
}
});
}