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

[Doc] beautify demo

Browse Source
This commit is contained in:
陈嘉涵 2019-05-16 14:08:44 +08:00
parent 3b89baedab
commit 0387fc7da8
26 changed files with 268 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -24,7 +24,7 @@
## Features
* 50+ Reusable components
* 55+ Reusable components
* 90% Unit test coverage
* Extensive documentation and demos
* Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)

2
README.zh-CN.md
View File

@ -23,7 +23,7 @@
## 特性
* 50+ 个组件
* 55+ 个组件
* 90% 单元测试覆盖率
* 完善的中英文文档和示例
* 支持按需引入

2
docs/markdown/intro.en-US.md
View File

@ -8,7 +8,7 @@
### Features
* 50+ Reusable components
* 55+ Reusable components
* 90% Unit test coverage
* Extensive documentation and demos
* Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)

2
docs/markdown/intro.zh-CN.md
View File

@ -8,7 +8,7 @@
### 特性
* 50+ 个组件
* 55+ 个组件
* 90% 单元测试覆盖率
* 完善的中英文文档和示例
* 支持按需引入

32
packages/action-sheet/demo/index.vue
View File

@ -1,7 +1,12 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-button @click="show1 = true">{{ $t('buttonText') }}</van-button>
<van-button
type="primary"
@click="show1 = true"
>
{{ $t('buttonText') }}
</van-button>
<van-action-sheet
v-model="show1"
:actions="simpleActions"
@ -10,7 +15,12 @@
</demo-block>
<demo-block :title="$t('status')">
<van-button @click="show2 = true">{{ $t('buttonText') }}</van-button>
<van-button
type="primary"
@click="show2 = true"
>
{{ $t('buttonText') }}
</van-button>
<van-action-sheet
v-model="show2"
:actions="statusActions"
@ -19,7 +29,12 @@
</demo-block>
<demo-block :title="$t('title2')">
<van-button @click="show3 = true">{{ $t('buttonText') }}</van-button>
<van-button
type="primary"
@click="show3 = true"
>
{{ $t('buttonText') }}
</van-button>
<van-action-sheet
v-model="show3"
:actions="simpleActions"
@ -30,7 +45,12 @@
</demo-block>
<demo-block :title="$t('title3')">
<van-button @click="show4 = true">{{ $t('buttonText') }}</van-button>
<van-button
type="primary"
@click="show4 = true"
>
{{ $t('buttonText') }}
</van-button>
<van-action-sheet
v-model="show4"
:title="$t('title')"
@ -104,7 +124,11 @@ export default {
</script>
<style lang="less">
@import "../../style/var";
.demo-action-sheet {
background-color: @white;
.van-button {
margin-left: 15px;
}

16
packages/action-sheet/test/__snapshots__/demo.spec.js.snap
View File

@ -2,16 +2,24 @@
exports[`renders demo correctly 1`] = `
<div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出菜单</span></button>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
弹出菜单
</span></button>
<!---->
</div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出菜单</span></button>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
弹出菜单
</span></button>
<!---->
</div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出菜单</span></button>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
弹出菜单
</span></button>
<!---->
</div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出菜单</span></button>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
弹出菜单
</span></button>
<!---->
</div>
</div>

28
packages/button/demo/index.vue
View File

@ -78,10 +78,30 @@
</demo-block>
<demo-block :title="$t('size')">
<van-button size="large">{{ $t('large') }}</van-button>
<van-button size="normal">{{ $t('normal') }}</van-button>
<van-button size="small">{{ $t('small') }}</van-button>
<van-button size="mini">{{ $t('mini') }}</van-button>
<van-button
type="primary"
size="large"
>
{{ $t('large') }}
</van-button>
<van-button
type="primary"
size="normal"
>
{{ $t('normal') }}
</van-button>
<van-button
type="primary"
size="small"
>
{{ $t('small') }}
</van-button>
<van-button
type="primary"
size="mini"
>
{{ $t('mini') }}
</van-button>
</demo-block>
</demo-section>
</template>

8
packages/button/en-US.md
View File

@ -63,10 +63,10 @@ Vue.use(Button);
### Size
```html
<van-button size="large">Large</van-button>
<van-button size="normal">Normal</van-button>
<van-button size="small">Small</van-button>
<van-button size="mini">Mini</van-button>
<van-button type="primary" size="large">Large</van-button>
<van-button type="primary" size="normal">Normal</van-button>
<van-button type="primary" size="small">Small</van-button>
<van-button type="primary" size="mini">Mini</van-button>
```
## API

10
packages/button/test/__snapshots__/demo.spec.js.snap
View File

@ -14,6 +14,14 @@ exports[`renders demo correctly 1`] = `
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div><span class="van-button__loading-text">加载中...</span>
</button></div>
<div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
<div><button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--default van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--default van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
<div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">
大号按钮
</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
普通按钮
</span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">
小型按钮
</span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">
迷你按钮
</span></button></div>
</div>
`;

8
packages/button/zh-CN.md
View File

@ -73,10 +73,10 @@ Vue.use(Button);
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
```html
<van-button size="large">大号按钮</van-button>
<van-button size="normal">普通按钮</van-button>
<van-button size="small">小型按钮</van-button>
<van-button size="mini">迷你按钮</van-button>
<van-button type="primary" size="large">大号按钮</van-button>
<van-button type="primary" size="normal">普通按钮</van-button>
<van-button type="primary" size="small">小型按钮</van-button>
<van-button type="primary" size="mini">迷你按钮</van-button>
```
## API

4
packages/checkbox/demo/index.vue
View File

@ -143,6 +143,10 @@ export default {
}
.van-cell {
&__value {
flex: none;
}
.van-checkbox {
margin: 0;
}

11
packages/dialog/demo/index.vue
View File

@ -3,14 +3,12 @@
<demo-block :title="$t('alert1')">
<van-button
type="primary"
plain
@click="onClickAlert"
>
{{ $t('alert1') }}
</van-button>
<van-button
type="primary"
plain
@click="onClickAlert2"
>
{{ $t('alert2') }}
@ -20,7 +18,6 @@
<demo-block :title="$t('confirm')">
<van-button
type="primary"
plain
@click="onClickConfirm"
>
{{ $t('confirm') }}
@ -30,7 +27,6 @@
<demo-block :title="$t('asyncClose')">
<van-button
type="primary"
plain
@click="onClickAsyncClose"
>
{{ $t('asyncClose') }}
@ -39,8 +35,7 @@
<demo-block :title="$t('componentCall')">
<van-button
type="danger"
plain
type="primary"
@click="show = true"
>
{{ $t('componentCall') }}
@ -126,7 +121,11 @@ export default {
</script>
<style lang="less">
@import "../../style/var";
.demo-dialog {
background-color: @white;
.van-doc-demo-block > .van-button {
margin-left: 15px;
}

10
packages/dialog/test/__snapshots__/demo.spec.js.snap
View File

@ -2,18 +2,18 @@
exports[`renders demo correctly 1`] = `
<div>
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
提示弹窗
</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
提示弹窗（无标题）
</span></button></div>
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
确认弹窗
</span></button></div>
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
异步关闭
</span></button></div>
<div><button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
组件调用
</span></button>
<div class="van-dialog" style="display: none;" name="van-dialog-bounce">

32
packages/image-preview/demo/index.vue
View File

@ -1,19 +1,39 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-button @click="showImagePreview">{{ $t('button1') }}</van-button>
<van-button
type="primary"
@click="showImagePreview"
>
{{ $t('button1') }}
</van-button>
</demo-block>
<demo-block :title="$t('button2')">
<van-button @click="showImagePreview(1)">{{ $t('button2') }}</van-button>
<van-button
type="primary"
@click="showImagePreview(1)"
>
{{ $t('button2') }}
</van-button>
</demo-block>
<demo-block :title="$t('button3')">
<van-button @click="showImagePreview(0, 1000)">{{ $t('button3') }}</van-button>
<van-button
type="primary"
@click="showImagePreview(0, 1000)"
>
{{ $t('button3') }}
</van-button>
</demo-block>
<demo-block :title="$t('componentCall')">
<van-button @click="componentCall">{{ $t('componentCall') }}</van-button>
<van-button
type="primary"
@click="componentCall"
>
{{ $t('componentCall') }}
</van-button>
<van-image-preview
v-model="show"
:images="images"
@ -88,7 +108,11 @@ export default {
</script>
<style lang="less">
@import "../../style/var";
.demo-image-preview {
background-color: @white;
.van-button {
margin-left: 15px;
}

2
packages/lazyload/demo/index.vue
View File

@ -61,7 +61,7 @@ export default {
<style lang="less">
.demo-lazyload {
padding: 0 15px;
padding: 15px;
img,
div[lazy] {

6
packages/notify/demo/index.vue
View File

@ -2,6 +2,7 @@
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-button
type="primary"
:text="$t('showNotify')"
@click="showNotify"
/>
@ -9,6 +10,7 @@
<demo-block :title="$t('customConfig')">
<van-button
type="primary"
:text="$t('showCustomNotify')"
@click="showCustomNotify"
/>
@ -50,7 +52,11 @@ export default {
</script>
<style lang="less">
@import "../../style/var";
.demo-notify {
background-color: @white;
.van-button {
margin-left: 15px;
}

4
packages/notify/test/__snapshots__/demo.spec.js.snap
View File

@ -2,7 +2,7 @@
exports[`renders demo correctly 1`] = `
<div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">显示消息通知</span></button></div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">显示自定义消息通知</span></button></div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">显示消息通知</span></button></div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">显示自定义消息通知</span></button></div>
</div>
`;

10
packages/number-keyboard/demo/index.vue
View File

@ -1,7 +1,10 @@
<template>
<demo-section>
<demo-block :title="$t('default')">
<van-button @touchstart.stop="keyboard = 'default'">
<van-button
type="primary"
@touchstart.stop="keyboard = 'default'"
>
{{ $t('button1') }}
</van-button>
@ -16,7 +19,10 @@
</demo-block>
<demo-block :title="$t('custom')">
<van-button @touchstart.stop="keyboard = 'custom'">
<van-button
type="primary"
@touchstart.stop="keyboard = 'custom'"
>
{{ $t('button2') }}
</van-button>

4
packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
View File

@ -2,7 +2,7 @@
exports[`renders demo correctly 1`] = `
<div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
弹出默认键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray">.</i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
</div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
弹出自定义键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--custom" style="z-index: 100; display: none;" name="van-slide-up">

49
packages/popup/demo/index.vue
View File

@ -1,12 +1,22 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-button @click="show1 = true">{{ $t('button1') }}</van-button>
<van-button
type="primary"
@click="show1 = true"
>
{{ $t('button1') }}
</van-button>
<van-popup v-model="show1">{{ $t('content') }}</van-popup>
</demo-block>
<demo-block :title="$t('position')">
<van-button @click="show2 = true;">{{ $t('button2') }}</van-button>
<van-button
type="primary"
@click="show2 = true"
>
{{ $t('button2') }}
</van-button>
<van-popup
v-model="show2"
@ -20,7 +30,12 @@
/>
</van-popup>
<van-button @click="show3 = true">{{ $t('button4') }}</van-button>
<van-button
type="primary"
@click="show3 = true"
>
{{ $t('button4') }}
</van-button>
<van-popup
v-model="show3"
position="top"
@ -29,18 +44,38 @@
{{ $t('content') }}
</van-popup>
<van-button @click="show4 = true">{{ $t('button5') }}</van-button>
<van-button
type="primary"
@click="show4 = true"
>
{{ $t('button5') }}
</van-button>
<van-popup
v-model="show4"
position="right"
>
<van-button @click="show4 = false">{{ $t('button6') }}</van-button>
<van-button @click="show5 = true">{{ $t('button5') }}</van-button>
<van-button
type="primary"
@click="show4 = false"
>
{{ $t('button6') }}
</van-button>
<van-button
type="primary"
@click="show5 = true"
>
{{ $t('button5') }}
</van-button>
<van-popup
v-model="show5"
position="right"
>
<van-button @click="show5 = false">{{ $t('button6') }}</van-button>
<van-button
type="primary"
@click="show5 = false"
>
{{ $t('button6') }}
</van-button>
</van-popup>
</van-popup>
</demo-block>

16
packages/popup/test/__snapshots__/demo.spec.js.snap
View File

@ -2,12 +2,20 @@
exports[`renders demo correctly 1`] = `
<div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出 Popup</span></button>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
弹出 Popup
</span></button>
<!---->
</div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">底部弹出</span></button>
<!----> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">顶部弹出</span></button>
<!----> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">右侧弹出</span></button>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
底部弹出
</span></button>
<!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
顶部弹出
</span></button>
<!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
右侧弹出
</span></button>
<!---->
</div>
</div>

4
packages/pull-refresh/demo/index.vue
View File

@ -44,7 +44,11 @@ export default {
</script>
<style lang="less">
@import "../../style/var";
.demo-pull-refresh {
background-color: @white;
.van-pull-refresh {
&,
&__track {

4
packages/radio/demo/index.vue
View File

@ -115,6 +115,10 @@ export default {
}
}
.van-cell__value {
flex: none;
}
img {
height: 20px;
}

4
packages/sku/demo/index.vue
View File

@ -226,7 +226,11 @@ export default {
</script>
<style lang="less">
@import "../../style/var";
.demo-sku {
background-color: @white;
.sku-container {
padding: 0 15px;
}

46
packages/toast/demo/index.vue
View File

@ -1,21 +1,51 @@
<template>
<demo-section>
<demo-block :title="$t('title1')">
<van-button @click="$toast($t('text'))">{{ $t('title1') }}</van-button>
<van-button @click="$toast($t('longText'))">{{ $t('longTextButton') }}</van-button>
<van-button
type="primary"
@click="$toast($t('text'))"
>
{{ $t('title1') }}
</van-button>
<van-button
type="primary"
@click="$toast($t('longText'))"
>
{{ $t('longTextButton') }}
</van-button>
</demo-block>
<demo-block :title="$t('title2')">
<van-button @click="showLoadingToast">{{ $t('title2') }}</van-button>
<van-button
type="primary"
@click="showLoadingToast"
>
{{ $t('title2') }}
</van-button>
</demo-block>
<demo-block :title="$t('title3')">
<van-button @click="showSuccessToast">{{ $t('success') }}</van-button>
<van-button @click="showFailToast">{{ $t('fail') }}</van-button>
<van-button
type="info"
@click="showSuccessToast"
>
{{ $t('success') }}
</van-button>
<van-button
type="danger"
@click="showFailToast"
>
{{ $t('fail') }}
</van-button>
</demo-block>
<demo-block :title="$t('advancedUsage')">
<van-button @click="showCustomizedToast">{{ $t('advancedUsage') }}</van-button>
<van-button
type="primary"
@click="showCustomizedToast"
>
{{ $t('advancedUsage') }}
</van-button>
</demo-block>
</demo-section>
</template>
@ -88,7 +118,11 @@ export default {
</script>
<style lang="less">
@import "../../style/var";
.demo-toast {
background-color: @white;
.van-button {
margin-left: 15px;
}

20
packages/toast/test/__snapshots__/demo.spec.js.snap
View File

@ -2,9 +2,21 @@
exports[`renders demo correctly 1`] = `
<div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">文字提示</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">长文字提示</span></button></div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">加载提示</span></button></div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">成功提示</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">失败提示</span></button></div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">高级用法</span></button></div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
文字提示
</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
长文字提示
</span></button></div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
加载提示
</span></button></div>
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
成功提示
</span></button> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">
失败提示
</span></button></div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
高级用法
</span></button></div>
</div>
`;