blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-24 23:49:14 +08:00
Code Issues Projects Releases Wiki Activity

build docs

Browse Source
This commit is contained in:
cookfront 2017-03-31 10:12:54 +08:00
parent defec4a4a3
commit ea12a0cddd
8 changed files with 61 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/examples-dist/badge.vue
View File

@ -1,9 +1,17 @@
<template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
<zan-badge-group :active-key="activeKey">
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
<zan-badge-group>
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
</example-block><example-block title="选中某个badge">
<zan-badge-group :active-key="2">
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
</example-block></section></template>

21
docs/examples-dist/cell.vue
View File

@ -4,11 +4,6 @@
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
</zan-cell-group>
</example-block><example-block title="带*号，标明必填">
<zan-cell-group>
<zan-cell title="单元格1" required></zan-cell>
</zan-cell-group>
</example-block><example-block title="标题带描述信息">
<zan-cell-group>
<zan-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></zan-cell>
@ -40,10 +35,18 @@
</example-block></section></template>
<style>
.official-img {
width: 31px;
vertical-align: middle;
border: 0;
@component-namespace demo {
@b card {
.official-img {
width: 31px;
vertical-align: middle;
border: 0;
}
.examples {
background-color: #fff;
}
}
}
</style>
<script>

54
docs/examples-dist/loading.vue
View File

@ -1,40 +1,32 @@
<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="基础用法">
<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>
<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>
<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="渐变深色spinner">
<zan-loading class="some-customized-class"></zan-loading>
</example-block><example-block title="">
<div class="demo-loading__example demo-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
</div>
</example-block><example-block title="">
<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
</example-block></section></template>
<style>
.demo-loading__example{
width: 30px;
height: 30px;
padding: 20px;
margin: auto;
border-radius: 5px;
border: 1px solid transparent;
}
@component-namespace demo {
@b loading {
.zan-loading {
margin: 0 auto;
}
.demo-loading__example--with-bg {
background-color: rgba(0, 0, 0, 0.5);
}
.circle-loading {
margin: 20px auto;
}
.demo-loading {
padding: 0 20px;
.demo-loading__example--with-bg {
background-color: rgba(0, 0, 0, 0.5);
margin-bottom: 10px;
}
}
}
</style>
<script>

2
docs/examples-dist/progress.vue
View File

@ -20,7 +20,7 @@
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
</div>
</example-block><example-block title="自定义颜色">
</example-block><example-block title="自定义颜色和文字">
<div class="demo-progress__wrapper">
<zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
</div>

5
docs/examples-dist/search.vue
View File

@ -1,5 +1,5 @@
<template><section class="demo-search"><h1 class="demo-title">search</h1><example-block title="基础用法">
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange"></zan-search>
</example-block></section></template>
@ -10,6 +10,9 @@ export default {
methods: {
goSearch(value) {
alert(value)
},
handleChange(value) {
console.log(value);
}
}
};

2
docs/examples-dist/steps.vue
View File

@ -1,5 +1,5 @@
<template><section class="demo-steps"><h1 class="demo-title">steps</h1><example-block title="基础用法">
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
<zan-step>买家下单</zan-step>
<zan-step>商家接单</zan-step>
<zan-step>买家提货</zan-step>

10
docs/examples-dist/tag.vue
View File

@ -1,7 +1,7 @@
<template><section class="demo-tag"><h1 class="demo-title">tag</h1><example-block title="基础用法">
<div class="tags-container">
<zan-tag>返现</zan-tag>
<zan-tag :plain="true">返现</zan-tag>
<zan-tag plain="">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
@ -12,18 +12,18 @@
</example-block><example-block title="高级用法">
<div class="tags-container">
<zan-tag type="danger">返现</zan-tag>
<zan-tag :plain="true" type="danger">返现</zan-tag>
<zan-tag plain="" type="danger">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="primary">返现</zan-tag>
<zan-tag :plain="true" type="primary">返现</zan-tag>
<zan-tag plain="" type="primary">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="success">返现</zan-tag>
<zan-tag :plain="true" type="success">返现</zan-tag>
<zan-tag plain="" type="success">返现</zan-tag>
</div>
<div class="tags-container">
<zan-tag type="danger" :mark="true">返现</zan-tag>
<zan-tag type="danger" mark="">返现</zan-tag>
</div>
</example-block></section></template>

4
docs/examples-dist/toast.vue
View File

@ -60,9 +60,9 @@ export default {
type: 'success',
message: leftSec.toString()
});
window.setInterval(() => {
const id = window.setInterval(() => {
if (leftSec <= 1) {
window.clearInterval();
window.clearInterval(id);
toast.message = '跳转中...'
return;
}