blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Collapse: content default style (#1069)

Browse Source
This commit is contained in:
neverland 2018-12-12 17:25:50 +08:00 committed by GitHub
parent 35b0a8e510
commit a2f9e34fac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
example/pages/collapse/index.wxml
View File

@ -1,37 +1,31 @@
<demo-block title="基础用法">
<van-collapse value="{{ active1 }}" data-key="active1" bind:change="onChange">
<van-collapse-item title="{{ title1 }}" content-class="van-collapse-item__content">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}" content-class="van-collapse-item__content">{{ content2 }}</van-collapse-item>
<van-collapse-item
title="{{ title3 }}"
content-class="van-collapse-item__content"
disabled
>
{{ content3 }}
</van-collapse-item>
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
<van-collapse-item title="{{ title3 }}" disabled>{{ content3 }}</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block title="手风琴">
<van-collapse value="{{ active2 }}" data-key="active2" accordion bind:change="onChange">
<van-collapse-item title="{{ title1 }}" content-class="van-collapse-item__content">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}" content-class="van-collapse-item__content">{{ content2 }}</van-collapse-item>
<van-collapse-item title="{{ title3 }}" content-class="van-collapse-item__content">{{ content3 }}</van-collapse-item>
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
<van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block title="自定义标题内容">
<van-collapse value="{{ active3 }}" data-key="active3" bind:change="onChange">
<van-collapse-item content-class="van-collapse-item__content">
<van-collapse-item>
<view slot="title">{{ title1 }}<van-icon name="question" custom-class="van-icon-question" /></view>
{{ content1 }}
</van-collapse-item>
<van-collapse-item
title="{{ title2 }}"
content-class="van-collapse-item__content"
value="内容"
icon="shop"
>{{ content2 }}</van-collapse-item>
<van-collapse-item title="{{ title3 }}" content-class="van-collapse-item__content">{{ content3 }}</van-collapse-item>
<van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
</van-collapse>
</demo-block>

6
example/pages/collapse/index.wxss
View File

@ -1,9 +1,3 @@
.van-collapse-item__content {
font-size: 13px;
line-height: 1.5;
color: #666;
}
.van-icon-question {
margin-left: 5px;
font-size: 15px !important;

19
packages/collapse-item/index.less
View File

@ -4,7 +4,7 @@
&__title {
.van-cell__right-icon {
transform: rotate(90deg);
transition: 0.3s;
transition: @collapse-item-transition-duration;
}
&--expanded {
@ -14,12 +14,12 @@
}
&--disabled {
& .van-cell,
& .van-cell__right-icon {
color: @gray !important;
.van-cell,
.van-cell__right-icon {
color: @collapse-item-title-disabled-color !important;
}
&:active {
.van-cell:active {
background-color: @white !important;
}
}
@ -28,11 +28,14 @@
&__wrapper {
overflow: hidden;
will-change: max-height;
transition: max-height 0.3s ease-in-out;
transition: max-height @collapse-item-transition-duration ease-in-out;
}
&__content {
padding: 15px;
background-color: @white;
color: @collapse-item-content-text-color;
padding: @collapse-item-content-padding;
font-size: @collapse-item-content-font-size;
line-height: @collapse-item-content-line-height;
background-color: @collapse-item-content-background-color;
}
}

2
packages/collapse/README.md
View File

@ -98,8 +98,6 @@ Page({
});
```
### Collapse API
| 参数 | 说明 | 类型 | 默认值 | 版本 |

9
packages/common/style/var.less
View File

@ -48,6 +48,15 @@
@checkbox-disabled-label-color: @gray;
@checkbox-disabled-background-color: @border-color;
// Collapse
@collapse-item-transition-duration: .3s;
@collapse-item-content-padding: 15px;
@collapse-item-content-font-size: 13px;
@collapse-item-content-line-height: 1.5;
@collapse-item-content-text-color: @gray-dark;
@collapse-item-content-background-color: @white;
@collapse-item-title-disabled-color: @gray;
// Info
@info-size: 16px;
@info-color: @white;