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(Collapse): add disabled demo (#7361)

Browse Source
This commit is contained in:
neverland 2020-10-20 09:31:03 +08:00 committed by GitHub
parent 83fc8673a8
commit 784165d88c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 72 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/collapse/README.md
View File

@ -20,9 +20,7 @@ Use `v-model` to control the name of active panels.
<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" disabled
>Content</van-collapse-item
>
<van-collapse-item title="Title3" name="3">Content</van-collapse-item>
</van-collapse>
```
@ -58,6 +56,22 @@ export default {
};
```
### Disabled
Use the `disabled` prop to disable CollaseItem.
```html
<van-collapse v-model="activeNames">
<van-collapse-item title="Title1" name="1">Content</van-collapse-item>
<van-collapse-item title="Title2" name="2" disabled>
Content
</van-collapse-item>
<van-collapse-item title="Title3" name="3" disabled>
Content
</van-collapse-item>
</van-collapse>
```
### Custom title
```html

16
src/collapse/README.zh-CN.md
View File

@ -24,7 +24,7 @@ Vue.use(CollapseItem);
<van-collapse v-model="activeNames">
<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-item title="标题3" name="3">内容</van-collapse-item>
</van-collapse>
```
@ -60,8 +60,22 @@ export default {
};
```
### 禁用状态
通过 `disabled` 属性来禁用单个面板。
```html
<van-collapse v-model="activeNames">
<van-collapse-item title="标题1" name="1">内容</van-collapse-item>
<van-collapse-item title="标题2" name="2" disabled>内容</van-collapse-item>
<van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
</van-collapse>
```
### 自定义标题内容
通过 `title` 插槽可以自定义标题栏的内容。
```html
<van-collapse v-model="activeNames">
<van-collapse-item name="1">

19
src/collapse/demo/index.vue
View File

@ -8,7 +8,7 @@
<van-collapse-item :title="t('title') + 2">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 3" disabled>
<van-collapse-item :title="t('title') + 3">
{{ t('text') }}
</van-collapse-item>
</van-collapse>
@ -28,8 +28,22 @@
</van-collapse>
</demo-block>
<demo-block :title="t('titleSlot')">
<demo-block :title="t('disabled')">
<van-collapse v-model="active3">
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 2" disabled>
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 3" disabled>
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block :title="t('titleSlot')">
<van-collapse v-model="active4">
<van-collapse-item>
<template #title>
{{ t('title') + 1 }}<van-icon name="question-o" />
@ -68,6 +82,7 @@ export default {
active1: [0],
active2: 0,
active3: [],
active4: [],
};
},
};

24
src/collapse/test/__snapshots__/demo.spec.js.snap
View File

@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-collapse-item van-collapse-item--border">
<div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
<div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
@ -56,6 +56,28 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div>
<div class="van-collapse van-hairline--top-bottom">
<div class="van-collapse-item">
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
<div class="van-cell__title"><span>标题1</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
</div>
<div class="van-collapse-item van-collapse-item--border">
<div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
<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-collapse-item--border">
<div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
<div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
</div>
</div>
</div>
<div>
<div class="van-collapse van-hairline--top-bottom">
<div class="van-collapse-item">