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

feat(Popup): add @popup-close-icon-active-color less var

Browse Source
This commit is contained in:
陈嘉涵 2020-02-06 11:04:43 +08:00
parent 265bfeaac7
commit 660b039951
5 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/popup/README.md
View File

@ -42,7 +42,7 @@ Use `position` prop to set popup display position
<van-popup <van-popup
v-model="show" v-model="show"
position="top" position="top"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
``` ```
@ -53,7 +53,7 @@ Use `position` prop to set popup display position
v-model="show" v-model="show"
closeable closeable
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
<!-- Custom Icon --> <!-- Custom Icon -->
<van-popup <van-popup
@ -61,7 +61,7 @@ Use `position` prop to set popup display position
closeable closeable
close-icon="close" close-icon="close"
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
<!-- Icon Position --> <!-- Icon Position -->
<van-popup <van-popup
@ -69,7 +69,7 @@ Use `position` prop to set popup display position
closeable closeable
close-icon-position="top-left" close-icon-position="top-left"
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
``` ```
@ -80,7 +80,7 @@ Use `position` prop to set popup display position
v-model="show" v-model="show"
round round
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
``` ```

10
src/popup/README.zh-CN.md
View File

@ -48,7 +48,7 @@ export default {
<van-popup <van-popup
v-model="show" v-model="show"
position="top" position="top"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
``` ```
@ -61,7 +61,7 @@ export default {
v-model="show" v-model="show"
closeable closeable
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
<!-- 自定义图标 --> <!-- 自定义图标 -->
<van-popup <van-popup
@ -69,7 +69,7 @@ export default {
closeable closeable
close-icon="close" close-icon="close"
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
<!-- 图标位置 --> <!-- 图标位置 -->
<van-popup <van-popup
@ -77,7 +77,7 @@ export default {
closeable closeable
close-icon-position="top-left" close-icon-position="top-left"
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
``` ```
@ -90,7 +90,7 @@ export default {
v-model="show" v-model="show"
round round
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
``` ```

16
src/popup/demo/index.vue
View File

@ -17,21 +17,21 @@
<van-cell :title="$t('buttonLeft')" is-link @click="showLeft = true" /> <van-cell :title="$t('buttonLeft')" is-link @click="showLeft = true" />
<van-cell :title="$t('buttonRight')" is-link @click="showRight = true" /> <van-cell :title="$t('buttonRight')" is-link @click="showRight = true" />
<van-popup v-model="showTop" position="top" :style="{ height: '20%' }" /> <van-popup v-model="showTop" position="top" :style="{ height: '30%' }" />
<van-popup <van-popup
v-model="showBottom" v-model="showBottom"
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
<van-popup <van-popup
v-model="showLeft" v-model="showLeft"
position="left" position="left"
:style="{ width: '20%', height: '100%' }" :style="{ width: '30%', height: '100%' }"
/> />
<van-popup <van-popup
v-model="showRight" v-model="showRight"
position="right" position="right"
:style="{ width: '20%', height: '100%' }" :style="{ width: '30%', height: '100%' }"
/> />
</demo-block> </demo-block>
@ -56,21 +56,21 @@
v-model="showCloseIcon" v-model="showCloseIcon"
closeable closeable
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
<van-popup <van-popup
v-model="showCustomCloseIcon" v-model="showCustomCloseIcon"
closeable closeable
close-icon="close" close-icon="close"
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
<van-popup <van-popup
v-model="showCustomIconPosition" v-model="showCustomIconPosition"
closeable closeable
close-icon-position="top-left" close-icon-position="top-left"
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
</demo-block> </demo-block>
@ -84,7 +84,7 @@
v-model="showRoundCorner" v-model="showRoundCorner"
round round
position="bottom" position="bottom"
:style="{ height: '20%' }" :style="{ height: '30%' }"
/> />
</demo-block> </demo-block>

2
src/popup/index.less
View File

@ -96,7 +96,7 @@
cursor: pointer; cursor: pointer;
&:active { &:active {
opacity: @active-opacity; color: @popup-close-icon-active-color;
} }
&--top-left { &--top-left {

7
src/style/var.less
View File

@ -71,7 +71,7 @@
@action-sheet-item-disabled-text-color: @gray-5; @action-sheet-item-disabled-text-color: @gray-5;
@action-sheet-subname-color: @gray-7; @action-sheet-subname-color: @gray-7;
@action-sheet-subname-font-size: @font-size-sm; @action-sheet-subname-font-size: @font-size-sm;
@action-sheet-close-icon-size: 20px; @action-sheet-close-icon-size: 22px;
@action-sheet-close-icon-color: @gray-5; @action-sheet-close-icon-color: @gray-5;
@action-sheet-close-icon-active-color: @gray-6; @action-sheet-close-icon-active-color: @gray-6;
@action-sheet-close-icon-padding: 0 @padding-md; @action-sheet-close-icon-padding: 0 @padding-md;
@ -527,8 +527,9 @@
@popup-background-color: @white; @popup-background-color: @white;
@popup-transition: transform @animation-duration-base ease-out; @popup-transition: transform @animation-duration-base ease-out;
@popup-round-border-radius: 20px; @popup-round-border-radius: 20px;
@popup-close-icon-size: 18px; @popup-close-icon-size: 22px;
@popup-close-icon-color: @gray-6; @popup-close-icon-color: @gray-5;
@popup-close-icon-active-color: @gray-6;
@popup-close-icon-margin: 16px; @popup-close-icon-margin: 16px;
@popup-close-icon-z-index: 1; @popup-close-icon-z-index: 1;