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

feat(ActionSheet): subname vertical align (#3726)

Browse Source 
* feat(DropdownMenu): adjust default color to @red

* feat(ActionSheet): subname vertical align
This commit is contained in:
neverland 2020-11-02 19:46:59 +08:00 committed by GitHub
parent d6cb2b61a6
commit be16713510
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/pages/action-sheet/index.js
View File

@ -48,6 +48,7 @@ Page({
toggleActionSheet5() { toggleActionSheet5() {
this.toggle('show5'); this.toggle('show5');
}, },
toggleActionSheet6() { toggleActionSheet6() {
this.toggle('show6'); this.toggle('show6');
}, },

3
example/pages/action-sheet/index.wxml
View File

@ -4,7 +4,6 @@
show="{{ show1 }}" show="{{ show1 }}"
actions="{{ action1 }}" actions="{{ action1 }}"
bind:close="toggleActionSheet1" bind:close="toggleActionSheet1"
bind:select="toggleActionSheet1"
/> />
</demo-block> </demo-block>
@ -14,8 +13,6 @@
show="{{ show2 }}" show="{{ show2 }}"
actions="{{ action2 }}" actions="{{ action2 }}"
bind:close="toggleActionSheet2" bind:close="toggleActionSheet2"
bind:cancel="toggleActionSheet2"
bind:select="toggleActionSheet2"
/> />
</demo-block> </demo-block>

18
packages/action-sheet/index.less
View File

@ -7,9 +7,10 @@
&__item, &__item,
&__cancel { &__cancel {
padding: 14px @padding-md;
text-align: center; text-align: center;
.theme(font-size, '@action-sheet-item-font-size'); .theme(font-size, '@action-sheet-item-font-size');
.theme(line-height, '@action-sheet-item-height'); .theme(line-height, '@action-sheet-item-line-height');
.theme(background-color, '@action-sheet-item-background'); .theme(background-color, '@action-sheet-item-background');
&--hover { &--hover {
@ -24,13 +25,12 @@
&__cancel { &__cancel {
.theme(color, '@action-sheet-cancel-text-color'); .theme(color, '@action-sheet-cancel-text-color');
}
&::before { &__gap {
display: block; display: block;
content: ' '; .theme(height, '@action-sheet-cancel-padding-top');
.theme(height, '@action-sheet-cancel-padding-top'); .theme(background-color, '@action-sheet-cancel-padding-color');
.theme(background-color, '@action-sheet-cancel-padding-color');
}
} }
&__item--disabled { &__item--disabled {
@ -42,9 +42,10 @@
} }
&__subname { &__subname {
.theme(margin-left, '@padding-base'); .theme(margin-top, '@padding-xs');
.theme(font-size, '@action-sheet-subname-font-size'); .theme(font-size, '@action-sheet-subname-font-size');
.theme(color, '@action-sheet-subname-color'); .theme(color, '@action-sheet-subname-color');
.theme(line-height, '@action-sheet-subname-line-height');
} }
&__header { &__header {
@ -74,6 +75,5 @@
&__loading { &__loading {
display: flex !important; display: flex !important;
.theme(height, '@action-sheet-item-height');
} }
} }

22
packages/action-sheet/index.wxml
View File

@ -49,19 +49,21 @@
> >
<block wx:if="{{ !item.loading }}"> <block wx:if="{{ !item.loading }}">
{{ item.name }} {{ item.name }}
<text wx:if="{{ item.subname }}" class="van-action-sheet__subname" >{{ item.subname }}</text> <view wx:if="{{ item.subname }}" class="van-action-sheet__subname" >{{ item.subname }}</view>
</block> </block>
<van-loading wx:else custom-class="van-action-sheet__loading" size="22px" /> <van-loading wx:else custom-class="van-action-sheet__loading" size="22px" />
</button> </button>
</view> </view>
<slot /> <slot />
<view <block wx:if="{{ cancelText }}">
wx:if="{{ cancelText }}" <view class="van-action-sheet__gap" />
class="van-action-sheet__cancel" <view
hover-class="van-action-sheet__cancel--hover" class="van-action-sheet__cancel"
hover-stay-time="70" hover-class="van-action-sheet__cancel--hover"
bind:tap="onCancel" hover-stay-time="70"
> bind:tap="onCancel"
{{ cancelText }} >
</view> {{ cancelText }}
</view>
</block>
</van-popup> </van-popup>

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

@ -72,13 +72,14 @@
@action-sheet-description-color: @gray-6; @action-sheet-description-color: @gray-6;
@action-sheet-description-font-size: @font-size-md; @action-sheet-description-font-size: @font-size-md;
@action-sheet-description-line-height: 20px; @action-sheet-description-line-height: 20px;
@action-sheet-item-height: 50px;
@action-sheet-item-background: @white; @action-sheet-item-background: @white;
@action-sheet-item-font-size: @font-size-lg; @action-sheet-item-font-size: @font-size-lg;
@action-sheet-item-line-height: 22px;
@action-sheet-item-text-color: @text-color; @action-sheet-item-text-color: @text-color;
@action-sheet-item-disabled-text-color: @gray-5; @action-sheet-item-disabled-text-color: @gray-5;
@action-sheet-subname-color: @gray-6; @action-sheet-subname-color: @gray-6;
@action-sheet-subname-font-size: @font-size-sm; @action-sheet-subname-font-size: @font-size-sm;
@action-sheet-subname-line-height: 20px;
@action-sheet-close-icon-size: 22px; @action-sheet-close-icon-size: 22px;
@action-sheet-close-icon-color: @gray-5; @action-sheet-close-icon-color: @gray-5;
@action-sheet-close-icon-padding: 0 @padding-md; @action-sheet-close-icon-padding: 0 @padding-md;