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

docs: demo card (#6703)

Browse Source
This commit is contained in:
neverland 2020-07-04 20:38:16 +08:00 committed by GitHub
parent d515780460
commit 2f1e84abe4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 1534 additions and 903 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -56,7 +56,7 @@
}, },
"devDependencies": { "devDependencies": {
"@ls-lint/ls-lint": "^1.8.0", "@ls-lint/ls-lint": "^1.8.0",
"@vant/cli": "^2.5.1", "@vant/cli": "^2.5.2",
"prettier": "^2.0.4", "prettier": "^2.0.4",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11"

8
packages/vant-cli/site/mobile/components/DemoBlock.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="van-doc-demo-block"> <div class="van-doc-demo-block">
<h2 class="van-doc-demo-block__title">{{ title }}</h2> <h2 v-if="title" class="van-doc-demo-block__title">{{ title }}</h2>
<div v-if="card" class="van-doc-demo-block__card"> <div v-if="card" class="van-doc-demo-block__card">
<slot /> <slot />
</div> </div>
@ -33,11 +33,15 @@ export default {
} }
&__card { &__card {
margin: 0 12px 0; margin: 12px 12px 0;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
} }
&__title + &__card {
margin-top: 0;
}
&:first-of-type { &:first-of-type {
.van-doc-demo-block__title { .van-doc-demo-block__title {
padding-top: 20px; padding-top: 20px;

6
src/action-sheet/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('basicUsage')" @click="show.basic = true" /> <van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
<van-cell is-link :title="t('showCancel')" @click="show.cancel = true" /> <van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
<van-cell <van-cell
@ -10,7 +10,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('optionStatus')"> <demo-block card :title="t('optionStatus')">
<van-cell <van-cell
is-link is-link
:title="t('optionStatus')" :title="t('optionStatus')"
@ -18,7 +18,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('customPanel')"> <demo-block card :title="t('customPanel')">
<van-cell is-link :title="t('customPanel')" @click="show.title = true" /> <van-cell is-link :title="t('customPanel')" @click="show.title = true" />
</demo-block> </demo-block>

8
src/area/demo/index.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-area :title="t('title')" :area-list="t('areaList')" /> <van-area :title="t('title')" :area-list="t('areaList')" />
</demo-block> </demo-block>
<demo-block :title="t('title2')"> <demo-block card :title="t('title2')">
<van-area :title="t('title')" :area-list="t('areaList')" :value="value" /> <van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
</demo-block> </demo-block>
<demo-block :title="t('title3')"> <demo-block card :title="t('title3')">
<van-area <van-area
:title="t('title')" :title="t('title')"
:area-list="t('areaList')" :area-list="t('areaList')"
@ -16,7 +16,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('title4')"> <demo-block card :title="t('title4')">
<van-area <van-area
:title="t('title')" :title="t('title')"
:area-list="t('areaList')" :area-list="t('areaList')"

24
src/button/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('type')"> <demo-block card :title="t('type')">
<div class="demo-button-row"> <div class="demo-button-row">
<van-button type="default">{{ t('default') }}</van-button> <van-button type="default">{{ t('default') }}</van-button>
<van-button type="primary">{{ t('primary') }}</van-button> <van-button type="primary">{{ t('primary') }}</van-button>
@ -10,33 +10,33 @@
<van-button type="warning">{{ t('warning') }}</van-button> <van-button type="warning">{{ t('warning') }}</van-button>
</demo-block> </demo-block>
<demo-block :title="t('plain')"> <demo-block card :title="t('plain')">
<van-button plain type="primary" :text="t('plain')" /> <van-button plain type="primary" :text="t('plain')" />
<van-button plain type="info" :text="t('plain')" /> <van-button plain type="info" :text="t('plain')" />
</demo-block> </demo-block>
<demo-block :title="t('hairline')"> <demo-block card :title="t('hairline')">
<van-button plain hairline type="primary" :text="t('hairlineButton')" /> <van-button plain hairline type="primary" :text="t('hairlineButton')" />
<van-button plain hairline type="info" :text="t('hairlineButton')" /> <van-button plain hairline type="info" :text="t('hairlineButton')" />
</demo-block> </demo-block>
<demo-block :title="t('disabled')"> <demo-block card :title="t('disabled')">
<van-button disabled type="primary" :text="t('disabled')" /> <van-button disabled type="primary" :text="t('disabled')" />
<van-button disabled type="info" :text="t('disabled')" /> <van-button disabled type="info" :text="t('disabled')" />
</demo-block> </demo-block>
<demo-block :title="t('loadingStatus')"> <demo-block card :title="t('loadingStatus')">
<van-button loading type="primary" /> <van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" /> <van-button loading type="primary" loading-type="spinner" />
<van-button loading :loading-text="t('loadingText')" type="info" /> <van-button loading :loading-text="t('loadingText')" type="info" />
</demo-block> </demo-block>
<demo-block :title="t('shape')"> <demo-block card :title="t('shape')">
<van-button type="primary" square :text="t('square')" /> <van-button type="primary" square :text="t('square')" />
<van-button type="info" round :text="t('round')" /> <van-button type="info" round :text="t('round')" />
</demo-block> </demo-block>
<demo-block :title="t('icon')"> <demo-block card :title="t('icon')">
<van-button type="primary" icon="star-o" /> <van-button type="primary" icon="star-o" />
<van-button type="primary" icon="star-o" :text="t('button')" /> <van-button type="primary" icon="star-o" :text="t('button')" />
<van-button <van-button
@ -47,18 +47,18 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('size')"> <demo-block card :title="t('size')">
<van-button type="primary" size="large">{{ t('large') }}</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="normal">{{ t('normal') }}</van-button>
<van-button type="primary" size="small">{{ t('small') }}</van-button> <van-button type="primary" size="small">{{ t('small') }}</van-button>
<van-button type="primary" size="mini">{{ t('mini') }}</van-button> <van-button type="primary" size="mini">{{ t('mini') }}</van-button>
</demo-block> </demo-block>
<demo-block :title="t('blockElement')"> <demo-block card :title="t('blockElement')">
<van-button type="primary" block>{{ t('blockElement') }}</van-button> <van-button type="primary" block>{{ t('blockElement') }}</van-button>
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="t('router')"> <demo-block card v-if="!isWeapp" :title="t('router')">
<van-button <van-button
:text="t('urlRoute')" :text="t('urlRoute')"
type="primary" type="primary"
@ -67,7 +67,7 @@
<van-button :text="t('vueRoute')" type="primary" to="index" /> <van-button :text="t('vueRoute')" type="primary" to="index" />
</demo-block> </demo-block>
<demo-block :title="t('customColor')"> <demo-block card :title="t('customColor')">
<van-button color="#7232dd" :text="t('pure')" /> <van-button color="#7232dd" :text="t('pure')" />
<van-button plain color="#7232dd" :text="t('pure')" /> <van-button plain color="#7232dd" :text="t('pure')" />
<van-button <van-button
@ -147,8 +147,6 @@ export default {
@import '../../style/var'; @import '../../style/var';
.demo-button { .demo-button {
background: @white;
.van-button { .van-button {
&--large { &--large {
margin-bottom: @padding-md; margin-bottom: @padding-md;

8
src/calendar/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-cell <van-cell
is-link is-link
:title="t('selectSingle')" :title="t('selectSingle')"
@ -23,7 +23,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('quickSelect')"> <demo-block card :title="t('quickSelect')">
<van-cell <van-cell
is-link is-link
:title="t('selectSingle')" :title="t('selectSingle')"
@ -39,7 +39,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('customCalendar')"> <demo-block card :title="t('customCalendar')">
<van-cell <van-cell
is-link is-link
:title="t('customColor')" :title="t('customColor')"
@ -83,7 +83,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('tiledDisplay')"> <demo-block card :title="t('tiledDisplay')">
<van-calendar <van-calendar
:title="t('calendar')" :title="t('calendar')"
:poppable="false" :poppable="false"

12
src/datetime-picker/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('dateType')"> <demo-block card :title="t('dateType')">
<van-datetime-picker <van-datetime-picker
v-model="value.date" v-model="value.date"
type="date" type="date"
@ -10,7 +10,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('yearMonthType')"> <demo-block card :title="t('yearMonthType')">
<van-datetime-picker <van-datetime-picker
v-model="value.yearMonth" v-model="value.yearMonth"
type="year-month" type="year-month"
@ -21,7 +21,7 @@
/> />
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="t('monthDayType')"> <demo-block card v-if="!isWeapp" :title="t('monthDayType')">
<van-datetime-picker <van-datetime-picker
v-model="value.monthDayType" v-model="value.monthDayType"
type="month-day" type="month-day"
@ -32,7 +32,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('timeType')"> <demo-block card :title="t('timeType')">
<van-datetime-picker <van-datetime-picker
v-model="value.time" v-model="value.time"
type="time" type="time"
@ -42,7 +42,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('datetimeType')"> <demo-block card :title="t('datetimeType')">
<van-datetime-picker <van-datetime-picker
v-model="value.datetime" v-model="value.datetime"
type="datetime" type="datetime"
@ -52,7 +52,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('optionFilter')"> <demo-block card :title="t('optionFilter')">
<van-datetime-picker <van-datetime-picker
v-model="value.optionFilter" v-model="value.optionFilter"
type="time" type="time"

11
src/lazyload/demo/index.vue
View File

@ -1,16 +1,20 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<img v-for="img in imageList" v-lazy="img" /> <img v-for="img in imageList" :key="img" v-lazy="img" />
</demo-block> </demo-block>
<demo-block :title="t('title2')"> <demo-block :title="t('title2')">
<div v-for="img in backgroundImageList" v-lazy:background-image="img" /> <div
v-for="img in backgroundImageList"
:key="img"
v-lazy:background-image="img"
/>
</demo-block> </demo-block>
<demo-block :title="t('title3')"> <demo-block :title="t('title3')">
<lazy-component> <lazy-component>
<img v-for="img in componentImageList" v-lazy="img" /> <img v-for="img in componentImageList" :key="img" v-lazy="img" />
</lazy-component> </lazy-component>
</demo-block> </demo-block>
</demo-section> </demo-section>
@ -68,7 +72,6 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 8px 12px #ebedf0;
} }
.van-doc-demo-block__title, .van-doc-demo-block__title,

16
src/picker/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-picker <van-picker
show-toolbar show-toolbar
:title="t('title')" :title="t('title')"
@ -9,7 +9,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('defaultIndex')"> <demo-block card :title="t('defaultIndex')">
<van-picker <van-picker
show-toolbar show-toolbar
:title="t('title')" :title="t('title')"
@ -19,7 +19,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('multipleColumns')"> <demo-block card :title="t('multipleColumns')">
<van-picker <van-picker
show-toolbar show-toolbar
:title="t('title')" :title="t('title')"
@ -29,7 +29,7 @@
/> />
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="t('cascade')"> <demo-block card v-if="!isWeapp" :title="t('cascade')">
<van-picker <van-picker
show-toolbar show-toolbar
:title="t('title')" :title="t('title')"
@ -39,7 +39,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('disableOption')"> <demo-block card :title="t('disableOption')">
<van-picker <van-picker
show-toolbar show-toolbar
:title="t('title')" :title="t('title')"
@ -47,7 +47,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('setColumnValues')"> <demo-block card :title="t('setColumnValues')">
<van-picker <van-picker
show-toolbar show-toolbar
:title="t('title')" :title="t('title')"
@ -56,11 +56,11 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('loadingStatus')"> <demo-block card :title="t('loadingStatus')">
<van-picker loading show-toolbar :title="t('title')" :columns="columns" /> <van-picker loading show-toolbar :title="t('title')" :columns="columns" />
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="t('withPopup')"> <demo-block card v-if="!isWeapp" :title="t('withPopup')">
<van-field <van-field
readonly readonly
clickable clickable

10
src/popup/demo/index.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" /> <van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
<van-popup v-model="showBasic" :style="{ padding: '30px 50px' }"> <van-popup v-model="showBasic" :style="{ padding: '30px 50px' }">
{{ t('content') }} {{ t('content') }}
</van-popup> </van-popup>
</demo-block> </demo-block>
<demo-block :title="t('position')"> <demo-block card :title="t('position')">
<van-cell :title="t('buttonTop')" is-link @click="showTop = true" /> <van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
<van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" /> <van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
<van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" /> <van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
@ -31,7 +31,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('closeIcon')"> <demo-block card :title="t('closeIcon')">
<van-cell :title="t('closeIcon')" is-link @click="showCloseIcon = true" /> <van-cell :title="t('closeIcon')" is-link @click="showCloseIcon = true" />
<van-cell <van-cell
:title="t('customCloseIcon')" :title="t('customCloseIcon')"
@ -66,7 +66,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('roundCorner')"> <demo-block card :title="t('roundCorner')">
<van-cell <van-cell
:title="t('roundCorner')" :title="t('roundCorner')"
is-link is-link
@ -80,7 +80,7 @@
/> />
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="t('getContainer')"> <demo-block card v-if="!isWeapp" :title="t('getContainer')">
<van-cell <van-cell
:title="t('getContainer')" :title="t('getContainer')"
is-link is-link

8
src/share-sheet/demo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('showSheet')" @click="show.basic = true" /> <van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
<van-share-sheet <van-share-sheet
v-model="show.basic" v-model="show.basic"
@ -10,7 +10,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('multiLine')"> <demo-block card :title="t('multiLine')">
<van-cell <van-cell
is-link is-link
:title="t('showSheet')" :title="t('showSheet')"
@ -24,7 +24,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('customIcon')"> <demo-block card :title="t('customIcon')">
<van-cell <van-cell
is-link is-link
:title="t('showSheet')" :title="t('showSheet')"
@ -37,7 +37,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="t('withDesc')"> <demo-block card :title="t('withDesc')">
<van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" /> <van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
<van-share-sheet <van-share-sheet
v-model="show.withDesc" v-model="show.withDesc"

4
src/style/demo/index.vue
View File

@ -5,11 +5,11 @@
<div class="van-multi-ellipsis--l2">{{ t('text2') }}</div> <div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
</demo-block> </demo-block>
<demo-block :title="t('hairline')"> <demo-block card :title="t('hairline')">
<div class="van-hairline--top" /> <div class="van-hairline--top" />
</demo-block> </demo-block>
<demo-block :title="t('animation')"> <demo-block card :title="t('animation')">
<van-cell is-link title="Fade" @click="animate('van-fade')" /> <van-cell is-link title="Fade" @click="animate('van-fade')" />
<van-cell is-link title="Slide Up" @click="animate('van-slide-up')" /> <van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
<van-cell is-link title="Slide Down" @click="animate('van-slide-down')" /> <van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />

2320
yarn.lock
View File

File diff suppressed because it is too large Load Diff