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="基础用法"> <demo-block title="基础用法">
<van-collapse value="{{ active1 }}" data-key="active1" bind:change="onChange"> <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="{{ title1 }}">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}" content-class="van-collapse-item__content">{{ content2 }}</van-collapse-item> <van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
<van-collapse-item <van-collapse-item title="{{ title3 }}" disabled>{{ content3 }}</van-collapse-item>
title="{{ title3 }}"
content-class="van-collapse-item__content"
disabled
>
{{ content3 }}
</van-collapse-item>
</van-collapse> </van-collapse>
</demo-block> </demo-block>
<demo-block title="手风琴"> <demo-block title="手风琴">
<van-collapse value="{{ active2 }}" data-key="active2" accordion bind:change="onChange"> <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="{{ title1 }}">{{ content1 }}</van-collapse-item>
<van-collapse-item title="{{ title2 }}" content-class="van-collapse-item__content">{{ content2 }}</van-collapse-item> <van-collapse-item title="{{ title2 }}">{{ 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> </van-collapse>
</demo-block> </demo-block>
<demo-block title="自定义标题内容"> <demo-block title="自定义标题内容">
<van-collapse value="{{ active3 }}" data-key="active3" bind:change="onChange"> <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> <view slot="title">{{ title1 }}<van-icon name="question" custom-class="van-icon-question" /></view>
{{ content1 }} {{ content1 }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item <van-collapse-item
title="{{ title2 }}" title="{{ title2 }}"
content-class="van-collapse-item__content"
value="内容" value="内容"
icon="shop" icon="shop"
>{{ content2 }}</van-collapse-item> >{{ 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> </van-collapse>
</demo-block> </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 { .van-icon-question {
margin-left: 5px; margin-left: 5px;
font-size: 15px !important; font-size: 15px !important;

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

@ -4,7 +4,7 @@
&__title { &__title {
.van-cell__right-icon { .van-cell__right-icon {
transform: rotate(90deg); transform: rotate(90deg);
transition: 0.3s; transition: @collapse-item-transition-duration;
} }
&--expanded { &--expanded {
@ -14,12 +14,12 @@
} }
&--disabled { &--disabled {
& .van-cell, .van-cell,
& .van-cell__right-icon { .van-cell__right-icon {
color: @gray !important; color: @collapse-item-title-disabled-color !important;
} }
&:active { .van-cell:active {
background-color: @white !important; background-color: @white !important;
} }
} }
@ -28,11 +28,14 @@
&__wrapper { &__wrapper {
overflow: hidden; overflow: hidden;
will-change: max-height; will-change: max-height;
transition: max-height 0.3s ease-in-out; transition: max-height @collapse-item-transition-duration ease-in-out;
} }
&__content { &__content {
padding: 15px; color: @collapse-item-content-text-color;
background-color: @white; 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 ### Collapse API
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

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

@ -48,6 +48,15 @@
@checkbox-disabled-label-color: @gray; @checkbox-disabled-label-color: @gray;
@checkbox-disabled-background-color: @border-color; @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
@info-size: 16px; @info-size: 16px;
@info-color: @white; @info-color: @white;