ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-19 18:14:13 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[new feature] add Collapse component (#674)

Browse Source
This commit is contained in:
neverland
2018-03-12 17:40:20 +08:00
committed by GitHub
parent 0b7468f596
commit 0768aab52c
14 changed files with 523 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/demos/index.js
View File

@@ -33,6 +33,7 @@ export default {
'cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell'), 'cell')), 'cell')),
'checkbox': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/checkbox'), 'checkbox')), 'checkbox')),
'circle': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/circle'), 'circle')), 'circle')),
'collapse': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/collapse'), 'collapse')), 'collapse')),
'contact': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/contact'), 'contact')), 'contact')),
'coupon': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/coupon'), 'coupon')), 'coupon')),
'datetime-picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/datetime-picker'), 'datetime-picker')), 'datetime-picker')),

83
docs/demos/views/collapse.vue Normal file
View File

@@ -0,0 +1,83 @@
<template>
<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('title3')">{{ $t('content3') }}</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block :title="$t('accordion')">
<van-collapse 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>
</demo-block>
<demo-block :title="$t('titleSlot')">
<van-collapse v-model="active3">
<van-collapse-item>
<div slot="title">{{ $t('title1') }}<van-icon name="question" /></div>
{{ $t('content1') }}
</van-collapse-item>
<van-collapse-item :title="$t('title2')">{{ $t('content2') }}</van-collapse-item>
</van-collapse>
</demo-block>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
accordion: '手风琴',
titleSlot: '自定义标题内容',
title1: '有赞微商城',
title2: '有赞零售',
title3: '有赞美业',
content1: '提供多样店铺模板，快速搭建网上商城',
content2: '网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失',
content3: '线上拓客，随时预约，贴心顺手的开单收银'
},
'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.'
}
},
data() {
return {
active1: [0],
active2: 0,
active3: []
};
}
};
</script>
<style lang="postcss">
@import "../../../packages/vant-css/src/common/var.css";
.demo-collapse {
.van-collapse-item__content {
font-size: 13px;
line-height: 1.5;
color: $gray-darker;
}
.van-icon-question {
color: $blue;
vertical-align: -3px;
margin-left: 5px;
font-size: 15px;
}
}
</style>

95
docs/markdown/en-US/collapse.md Normal file
View File

@@ -0,0 +1,95 @@
## Collapse
### Install
``` javascript
import { Collapse } from 'vant';
Vue.use(Collapse);
```
### Usage
#### Basic Usage
Use `v-model` to control the name of active panels
```html
<van-collapse v-model="activeNames">
<van-collapse-item title="Title1" name="1">Content</van-collapse-item>
<van-collapse-item title="Title2" name="2">Content</van-collapse-item>
<van-collapse-item title="Title3" name="3">Content</van-collapse-item>
</van-collapse>
```
``` javascript
export default {
data() {
return {
activeNames: ['1']
};
}
};
```
#### Accordion
In accordion mode, only one panel can be expanded at the same time.
```html
<van-collapse v-model="activeName" accordion>
<van-collapse-item title="Title1" name="1">Content</van-collapse-item>
<van-collapse-item title="Title2" name="2">Content</van-collapse-item>
<van-collapse-item title="Title3" name="3">Content</van-collapse-item>
</van-collapse>
```
``` javascript
export default {
data() {
return {
activeName: '1'
};
}
};
```
#### Custom title
```html
<van-collapse v-model="activeNames">
<van-collapse-item name="1">
<div slot="title">Title1<van-icon name="question" /></div>
Content
</van-collapse-item>
<van-collapse-item title="Title2" name="2">
Content
</van-collapse-item>
</van-collapse>
```
### Collapse API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | names of current active panels | `Array | String | Number` | - | - |
| accordion | Whether to be accordion mode | `Boolean` | `false` | - |
### Collapse Event
| Event | Description | Arguments |
|-----------|-----------|-----------|
| change | Triggered when switch panel | activeNames: `string | array` |
### CollapseItem API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| name | Name | `String | Number` | `index` | - |
| title | Title | `String` | - | - |
### CollapseItem Slot
| name | Description |
|-----------|-----------|
| default | Content |
| title | Custom title |

2
docs/markdown/index.js
View File

@@ -27,6 +27,7 @@ export default {
'zh-CN/changelog': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog.md')), 'zh-CN/changelog')),
'zh-CN/checkbox': wrapper(r => require.ensure([], () => r(require('./zh-CN/checkbox.md')), 'zh-CN/checkbox')),
'zh-CN/circle': wrapper(r => require.ensure([], () => r(require('./zh-CN/circle.md')), 'zh-CN/circle')),
'zh-CN/collapse': wrapper(r => require.ensure([], () => r(require('./zh-CN/collapse.md')), 'zh-CN/collapse')),
'zh-CN/contact': wrapper(r => require.ensure([], () => r(require('./zh-CN/contact.md')), 'zh-CN/contact')),
'zh-CN/coupon': wrapper(r => require.ensure([], () => r(require('./zh-CN/coupon.md')), 'zh-CN/coupon')),
'zh-CN/datetime-picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/datetime-picker.md')), 'zh-CN/datetime-picker')),
@@ -81,6 +82,7 @@ export default {
'en-US/changelog': wrapper(r => require.ensure([], () => r(require('./en-US/changelog.md')), 'en-US/changelog')),
'en-US/checkbox': wrapper(r => require.ensure([], () => r(require('./en-US/checkbox.md')), 'en-US/checkbox')),
'en-US/circle': wrapper(r => require.ensure([], () => r(require('./en-US/circle.md')), 'en-US/circle')),
'en-US/collapse': wrapper(r => require.ensure([], () => r(require('./en-US/collapse.md')), 'en-US/collapse')),
'en-US/contact': wrapper(r => require.ensure([], () => r(require('./en-US/contact.md')), 'en-US/contact')),
'en-US/coupon': wrapper(r => require.ensure([], () => r(require('./en-US/coupon.md')), 'en-US/coupon')),
'en-US/datetime-picker': wrapper(r => require.ensure([], () => r(require('./en-US/datetime-picker.md')), 'en-US/datetime-picker')),

108
docs/markdown/zh-CN/collapse.md Normal file
View File

@@ -0,0 +1,108 @@
## Collapse 折叠面板
### 使用指南
``` javascript
import { Collapse } from 'vant';
Vue.use(Collapse);
```
### 代码演示
#### 基础用法
通过`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">
线上拓客，随时预约，贴心顺手的开单收银
</van-collapse-item>
</van-collapse>
```
``` javascript
export default {
data() {
return {
activeNames: ['1']
};
}
};
```
#### 手风琴
通过`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>
```
``` javascript
export default {
data() {
return {
activeName: '1'
};
}
};
```
#### 自定义标题内容
```html
<van-collapse v-model="activeNames">
<van-collapse-item name="1">
<div slot="title">有赞微商城<van-icon name="question" /></div>
提供多样店铺模板，快速搭建网上商城
</van-collapse-item>
<van-collapse-item title="有赞零售" name="2">
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
</van-collapse-item>
</van-collapse>
```
### Collapse API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前展开面板的 name | `Array | String | Number` | - | - |
| accordion | 是否开启手风琴模式 | `Boolean` | `false` | - |
### Collapse Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 切换面板时触发 | activeNames: `string | array` |
### CollapseItem API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| name | 面板唯一标识符，默认为索引值 | `String | Number` | `index` | - |
| title | 标题 | `String` | - | - |
### CollapseItem Slot
| 名称 | 说明 |
|-----------|-----------|
| default | 面板内容 |
| title | 自定义标题内容 |

8
docs/src/doc.config.js
View File

@@ -88,6 +88,10 @@ module.exports = {
path: '/circle',
title: 'Circle - 环形进度条'
},
{
path: '/collapse',
title: 'Collapse - 折叠面板'
},
{
path: '/icon',
title: 'Icon - 图标'
@@ -374,6 +378,10 @@ module.exports = {
path: '/circle',
title: 'Circle'
},
{
path: '/collapse',
title: 'Collapse'
},
{
path: '/icon',
title: 'Icon'