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
v-model="show"
position="top"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
```
@ -53,7 +53,7 @@ Use `position` prop to set popup display position
v-model="show"
closeable
position="bottom"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
<!-- Custom Icon -->
<van-popup
@ -61,7 +61,7 @@ Use `position` prop to set popup display position
closeable
close-icon="close"
position="bottom"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
<!-- Icon Position -->
<van-popup
@ -69,7 +69,7 @@ Use `position` prop to set popup display position
closeable
close-icon-position="top-left"
position="bottom"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
```
@ -80,7 +80,7 @@ Use `position` prop to set popup display position
v-model="show"
round
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
v-model="show"
position="top"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
```
@ -61,7 +61,7 @@ export default {
v-model="show"
closeable
position="bottom"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
<!-- 自定义图标 -->
<van-popup
@ -69,7 +69,7 @@ export default {
closeable
close-icon="close"
position="bottom"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
<!-- 图标位置 -->
<van-popup
@ -77,7 +77,7 @@ export default {
closeable
close-icon-position="top-left"
position="bottom"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
```
@ -90,7 +90,7 @@ export default {
v-model="show"
round
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('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
v-model="showBottom"
position="bottom"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
<van-popup
v-model="showLeft"
position="left"
:style="{ width: '20%', height: '100%' }"
:style="{ width: '30%', height: '100%' }"
/>
<van-popup
v-model="showRight"
position="right"
:style="{ width: '20%', height: '100%' }"
:style="{ width: '30%', height: '100%' }"
/>
</demo-block>
@ -56,21 +56,21 @@
v-model="showCloseIcon"
closeable
position="bottom"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
<van-popup
v-model="showCustomCloseIcon"
closeable
close-icon="close"
position="bottom"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
<van-popup
v-model="showCustomIconPosition"
closeable
close-icon-position="top-left"
position="bottom"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
</demo-block>
@ -84,7 +84,7 @@
v-model="showRoundCorner"
round
position="bottom"
:style="{ height: '20%' }"
:style="{ height: '30%' }"
/>
</demo-block>

2
src/popup/index.less
View File

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

7
src/style/var.less
View File

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