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": {
"@ls-lint/ls-lint": "^1.8.0",
"@vant/cli": "^2.5.1",
"@vant/cli": "^2.5.2",
"prettier": "^2.0.4",
"vue": "^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>
<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">
<slot />
</div>
@ -33,11 +33,15 @@ export default {
}
&__card {
margin: 0 12px 0;
margin: 12px 12px 0;
overflow: hidden;
border-radius: 8px;
}
&__title + &__card {
margin-top: 0;
}
&:first-of-type {
.van-doc-demo-block__title {
padding-top: 20px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
<template>
<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-share-sheet
v-model="show.basic"
@ -10,7 +10,7 @@
/>
</demo-block>
<demo-block :title="t('multiLine')">
<demo-block card :title="t('multiLine')">
<van-cell
is-link
:title="t('showSheet')"
@ -24,7 +24,7 @@
/>
</demo-block>
<demo-block :title="t('customIcon')">
<demo-block card :title="t('customIcon')">
<van-cell
is-link
:title="t('showSheet')"
@ -37,7 +37,7 @@
/>
</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-share-sheet
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>
</demo-block>
<demo-block :title="t('hairline')">
<demo-block card :title="t('hairline')">
<div class="van-hairline--top" />
</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="Slide Up" @click="animate('van-slide-up')" />
<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