mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] Collapse: update demo
This commit is contained in:
陈嘉涵
parent
c660c71ee6
commit
8ee250f22a
@ -2,13 +2,13 @@
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-collapse v-model="active1">
|
||||
<van-collapse-item :title="$t('title1')">{{ $t('content1') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title2')">{{ $t('content2') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title') + 1">{{ $t('text') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title') + 2">{{ $t('text') }}</van-collapse-item>
|
||||
<van-collapse-item
|
||||
:title="$t('title3')"
|
||||
:title="$t('title') + 3"
|
||||
disabled
|
||||
>
|
||||
{{ $t('content3') }}
|
||||
{{ $t('text') }}
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
@ -18,24 +18,24 @@
|
||||
v-model="active2"
|
||||
accordion
|
||||
>
|
||||
<van-collapse-item :title="$t('title1')">{{ $t('content1') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title2')">{{ $t('content2') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title3')">{{ $t('content3') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title') + 1">{{ $t('text') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title') + 2">{{ $t('text') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title') + 3">{{ $t('text') }}</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('titleSlot')">
|
||||
<van-collapse v-model="active3">
|
||||
<van-collapse-item>
|
||||
<div slot="title">{{ $t('title1') }}<van-icon name="question-o" /></div>
|
||||
{{ $t('content1') }}
|
||||
<div slot="title">{{ $t('title') + 1 }}<van-icon name="question-o" /></div>
|
||||
{{ $t('text') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item
|
||||
:title="$t('title2')"
|
||||
:title="$t('title') + 2"
|
||||
:value="$t('content')"
|
||||
icon="shop-o"
|
||||
>
|
||||
{{ $t('content2') }}
|
||||
{{ $t('text') }}
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
@ -48,22 +48,12 @@ export default {
|
||||
'zh-CN': {
|
||||
accordion: '手风琴',
|
||||
titleSlot: '自定义标题内容',
|
||||
title1: '有赞微商城',
|
||||
title2: '有赞零售',
|
||||
title3: '有赞美业',
|
||||
content1: '提供多样店铺模板，快速搭建网上商城',
|
||||
content2: '网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失',
|
||||
content3: '线上拓客，随时预约，贴心顺手的开单收银'
|
||||
text: '代码是写出来给人看的，附带能在机器上运行'
|
||||
},
|
||||
'en-US': {
|
||||
accordion: 'Accordion',
|
||||
titleSlot: 'Custom title',
|
||||
title1: 'Title1',
|
||||
title2: 'Title2',
|
||||
title3: 'Title3',
|
||||
content1: 'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.',
|
||||
content2: 'When someone walk out your life, let them. They are just making more room for someone else better to walk in.',
|
||||
content3: 'The world is big and life is short. Live the life the way you want.'
|
||||
text: 'Content'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -10,6 +10,7 @@ Vue.use(Collapse).use(CollapseItem);
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
Use `v-model` to control the name of active panels
|
||||
|
||||
```html
|
||||
@ -31,6 +32,7 @@ export default {
|
||||
```
|
||||
|
||||
#### Accordion
|
||||
|
||||
In accordion mode, only one panel can be expanded at the same time.
|
||||
|
||||
```html
|
||||
@ -56,7 +58,7 @@ export default {
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item name="1">
|
||||
<div slot="title">Title1<van-icon name="question-o" /></div>
|
||||
<div slot="title">Title1 <van-icon name="question-o" /></div>
|
||||
Content
|
||||
</van-collapse-item>
|
||||
<van-collapse-item
|
||||
@ -69,8 +71,6 @@ export default {
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Collapse Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|
||||
@ -6,22 +6,22 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-collapse van-hairline--top-bottom">
|
||||
<div class="van-collapse-item">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
|
||||
<div class="van-cell__title"><span>有赞微商城</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<div class="van-cell__title"><span>标题1</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-collapse-item__wrapper">
|
||||
<div class="van-collapse-item__content">提供多样店铺模板，快速搭建网上商城</div>
|
||||
<div class="van-collapse-item__content">代码是写出来给人看的，附带能在机器上运行</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>有赞零售</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
|
||||
<div class="van-cell__title"><span>有赞美业</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
@ -31,22 +31,22 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-collapse van-hairline--top-bottom">
|
||||
<div class="van-collapse-item">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
|
||||
<div class="van-cell__title"><span>有赞微商城</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<div class="van-cell__title"><span>标题1</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-collapse-item__wrapper">
|
||||
<div class="van-collapse-item__content">提供多样店铺模板，快速搭建网上商城</div>
|
||||
<div class="van-collapse-item__content">代码是写出来给人看的，附带能在机器上运行</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>有赞零售</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>有赞美业</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
@ -57,7 +57,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-collapse-item">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title">
|
||||
<div>有赞微商城<i class="van-icon van-icon-question-o">
|
||||
<div>标题1<i class="van-icon van-icon-question-o">
|
||||
<!----></i></div>
|
||||
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
@ -66,7 +66,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title"><i class="van-icon van-icon-shop-o van-cell__left-icon">
|
||||
<!----></i>
|
||||
<div class="van-cell__title"><span>有赞零售</span></div>
|
||||
<div class="van-cell__title"><span>标题2</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
|
||||
@ -10,19 +10,14 @@ Vue.use(Collapse).use(CollapseItem);
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过`v-model`控制展开的面板列表，`activeNames`为数组格式
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item title="有赞微商城" name="1">
|
||||
提供多样店铺模板，快速搭建网上商城
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="有赞零售" name="2">
|
||||
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="有赞美业" name="3" disabled>
|
||||
线上拓客，随时预约，贴心顺手的开单收银
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="标题1" name="1">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题2" name="2">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
@ -37,19 +32,14 @@ export default {
|
||||
```
|
||||
|
||||
#### 手风琴
|
||||
|
||||
通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeName" accordion>
|
||||
<van-collapse-item title="有赞微商城" name="1">
|
||||
提供多样店铺模板，快速搭建网上商城
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="有赞零售" name="2">
|
||||
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="有赞美业" name="3">
|
||||
线上拓客，随时预约，贴心顺手的开单收银
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="标题1" name="1">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题2" name="2">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题3" name="3">内容</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
@ -68,21 +58,20 @@ export default {
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item name="1">
|
||||
<div slot="title">有赞微商城<van-icon name="question-o" /></div>
|
||||
提供多样店铺模板，快速搭建网上商城
|
||||
<div slot="title">标题1 <van-icon name="question-o" /></div>
|
||||
内容
|
||||
</van-collapse-item>
|
||||
|
||||
<van-collapse-item
|
||||
title="有赞零售"
|
||||
title="标题2"
|
||||
name="2"
|
||||
icon="shop-o"
|
||||
>
|
||||
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
|
||||
内容
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Collapse Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user