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

style(DropdownMenu): using primary color by default

Browse Source
This commit is contained in:
chenjiahan 2022-01-24 15:17:33 +08:00
parent 84b90b1f4c
commit 37e7c618b8
10 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/vant/src/config-provider/README.md
View File

@ -98,9 +98,9 @@ export default {
sliderBarHeight: '4px', sliderBarHeight: '4px',
sliderButtonWidth: '20px', sliderButtonWidth: '20px',
sliderButtonHeight: '20px', sliderButtonHeight: '20px',
sliderActiveBackgroundColor: '#07c160', sliderActiveBackground: '#07c160',
buttonPrimaryBackground: '#07c160',
buttonPrimaryBorderColor: '#07c160', buttonPrimaryBorderColor: '#07c160',
buttonPrimaryBackgroundColor: '#07c160',
}; };
return { return {

4
packages/vant/src/config-provider/README.zh-CN.md
View File

@ -98,9 +98,9 @@ export default {
sliderBarHeight: '4px', sliderBarHeight: '4px',
sliderButtonWidth: '20px', sliderButtonWidth: '20px',
sliderButtonHeight: '20px', sliderButtonHeight: '20px',
sliderActiveBackgroundColor: '#07c160', sliderActiveBackground: '#07c160',
buttonPrimaryBackground: '#07c160',
buttonPrimaryBorderColor: '#07c160', buttonPrimaryBorderColor: '#07c160',
buttonPrimaryBackgroundColor: '#07c160',
}; };
return { return {

4
packages/vant/src/config-provider/demo/index.vue
View File

@ -34,9 +34,9 @@ const themeVars = {
sliderBarHeight: '4px', sliderBarHeight: '4px',
sliderButtonWidth: '20px', sliderButtonWidth: '20px',
sliderButtonHeight: '20px', sliderButtonHeight: '20px',
sliderActiveBackgroundColor: '#07c160', sliderActiveBackground: '#07c160',
buttonPrimaryBackground: '#07c160',
buttonPrimaryBorderColor: '#07c160', buttonPrimaryBorderColor: '#07c160',
buttonPrimaryBackgroundColor: '#07c160',
}; };
</script> </script>

4
packages/vant/src/count-down/README.md
View File

@ -64,7 +64,7 @@ export default {
.colon { .colon {
display: inline-block; display: inline-block;
margin: 0 4px; margin: 0 4px;
color: #ee0a24; color: #1989fa;
} }
.block { .block {
display: inline-block; display: inline-block;
@ -72,7 +72,7 @@ export default {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
background-color: #ee0a24; background-color: #1989fa;
} }
</style> </style>
``` ```

4
packages/vant/src/count-down/README.zh-CN.md
View File

@ -72,7 +72,7 @@ export default {
.colon { .colon {
display: inline-block; display: inline-block;
margin: 0 4px; margin: 0 4px;
color: #ee0a24; color: #1989fa;
} }
.block { .block {
display: inline-block; display: inline-block;
@ -80,7 +80,7 @@ export default {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
background-color: #ee0a24; background-color: #1989fa;
} }
</style> </style>
``` ```

2
packages/vant/src/dialog/index.less
View File

@ -17,7 +17,7 @@
--van-dialog-has-title-message-padding-top: var(--van-padding-xs); --van-dialog-has-title-message-padding-top: var(--van-padding-xs);
--van-dialog-button-height: 48px; --van-dialog-button-height: 48px;
--van-dialog-round-button-height: 36px; --van-dialog-round-button-height: 36px;
--van-dialog-confirm-button-text-color: var(--van-danger-color); --van-dialog-confirm-button-text-color: var(--van-primary-color);
} }
.van-dialog { .van-dialog {

14
packages/vant/src/dropdown-menu/README.md
View File

@ -64,16 +64,16 @@ export default {
<van-dropdown-item title="Title" ref="item"> <van-dropdown-item title="Title" ref="item">
<van-cell center title="Title"> <van-cell center title="Title">
<template #right-icon> <template #right-icon>
<van-switch v-model="switch1" size="24" active-color="#ee0a24" /> <van-switch v-model="switch1" size="24" />
</template> </template>
</van-cell> </van-cell>
<van-cell center title="Title"> <van-cell center title="Title">
<template #right-icon> <template #right-icon>
<van-switch v-model="switch2" size="24" active-color="#ee0a24" /> <van-switch v-model="switch2" size="24" />
</template> </template>
</van-cell> </van-cell>
<div style="padding: 5px 16px;"> <div style="padding: 5px 16px;">
<van-button type="danger" block round @click="onConfirm"> <van-button type="primary" block round @click="onConfirm">
Confirm Confirm
</van-button> </van-button>
</div> </div>
@ -116,7 +116,7 @@ export default {
Use `active-color` prop to custom active color of the title and options. Use `active-color` prop to custom active color of the title and options.
```html ```html
<van-dropdown-menu active-color="#1989fa"> <van-dropdown-menu active-color="#ee0a24">
<van-dropdown-item v-model="value1" :options="option1" /> <van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" /> <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu> </van-dropdown-menu>
@ -146,7 +146,7 @@ Use `active-color` prop to custom active color of the title and options.
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| active-color | Active color of title and option | _string_ | `#ee0a24` | | active-color | Active color of title and option | _string_ | `#1989fa` |
| direction | Expand direction, can be set to `up` | _string_ | `down` | | direction | Expand direction, can be set to `up` | _string_ | `down` |
| z-index | z-index of menu item | _number \| string_ | `10` | | z-index | z-index of menu item | _number \| string_ | `10` |
| duration | Transition duration, unit second | _number \| string_ | `0.2` | | duration | Transition duration, unit second | _number \| string_ | `0.2` |
@ -237,10 +237,10 @@ The component provides the following CSS variables, which can be used to customi
| --van-dropdown-menu-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - | | --van-dropdown-menu-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - |
| --van-dropdown-menu-title-font-size | _15px_ | - | | --van-dropdown-menu-title-font-size | _15px_ | - |
| --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - | | --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - |
| --van-dropdown-menu-title-active-text-color | _var(--van-danger-color)_ | - | | --van-dropdown-menu-title-active-text-color | _var(--van-primary-color)_ | - |
| --van-dropdown-menu-title-disabled-text-color | _var(--van-text-color-2)_ | - | | --van-dropdown-menu-title-disabled-text-color | _var(--van-text-color-2)_ | - |
| --van-dropdown-menu-title-padding | _0 var(--van-padding-xs)_ | - | | --van-dropdown-menu-title-padding | _0 var(--van-padding-xs)_ | - |
| --van-dropdown-menu-title-line-height | _var(--van-line-height-lg)_ | - | | --van-dropdown-menu-title-line-height | _var(--van-line-height-lg)_ | - |
| --van-dropdown-menu-option-active-color | _var(--van-danger-color)_ | - | | --van-dropdown-menu-option-active-color | _var(--van-primary-color)_ | - |
| --van-dropdown-menu-content-max-height | _80%_ | - | | --van-dropdown-menu-content-max-height | _80%_ | - |
| --van-dropdown-item-z-index | _10_ | - | | --van-dropdown-item-z-index | _10_ | - |

14
packages/vant/src/dropdown-menu/README.zh-CN.md
View File

@ -66,16 +66,16 @@ export default {
<van-dropdown-item title="筛选" ref="item"> <van-dropdown-item title="筛选" ref="item">
<van-cell center title="包邮"> <van-cell center title="包邮">
<template #right-icon> <template #right-icon>
<van-switch v-model="switch1" size="24" active-color="#ee0a24" /> <van-switch v-model="switch1" size="24" />
</template> </template>
</van-cell> </van-cell>
<van-cell center title="团购"> <van-cell center title="团购">
<template #right-icon> <template #right-icon>
<van-switch v-model="switch2" size="24" active-color="#ee0a24" /> <van-switch v-model="switch2" size="24" />
</template> </template>
</van-cell> </van-cell>
<div style="padding: 5px 16px;"> <div style="padding: 5px 16px;">
<van-button type="danger" block round @click="onConfirm"> <van-button type="primary" block round @click="onConfirm">
确认 确认
</van-button> </van-button>
</div> </div>
@ -118,7 +118,7 @@ export default {
通过 `active-color` 属性可以自定义菜单标题和选项的选中态颜色。 通过 `active-color` 属性可以自定义菜单标题和选项的选中态颜色。
```html ```html
<van-dropdown-menu active-color="#1989fa"> <van-dropdown-menu active-color="#ee0a24">
<van-dropdown-item v-model="value1" :options="option1" /> <van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" /> <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu> </van-dropdown-menu>
@ -150,7 +150,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| active-color | 菜单标题和选项的选中态颜色 | _string_ | `#ee0a24` | | active-color | 菜单标题和选项的选中态颜色 | _string_ | `#1989fa` |
| direction | 菜单展开方向，可选值为`up` | _string_ | `down` | | direction | 菜单展开方向，可选值为`up` | _string_ | `down` |
| z-index | 菜单栏 z-index 层级 | _number \| string_ | `10` | | z-index | 菜单栏 z-index 层级 | _number \| string_ | `10` |
| duration | 动画时长，单位秒，设置为 0 可以禁用动画 | _number \| string_ | `0.2` | | duration | 动画时长，单位秒，设置为 0 可以禁用动画 | _number \| string_ | `0.2` |
@ -241,11 +241,11 @@ dropdownItemRef.value?.toggle();
| --van-dropdown-menu-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - | | --van-dropdown-menu-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - |
| --van-dropdown-menu-title-font-size | _15px_ | - | | --van-dropdown-menu-title-font-size | _15px_ | - |
| --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - | | --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - |
| --van-dropdown-menu-title-active-text-color | _var(--van-danger-color)_ | - | | --van-dropdown-menu-title-active-text-color | _var(--van-primary-color)_ | - |
| --van-dropdown-menu-title-disabled-text-color | _var(--van-text-color-2)_ | - | | --van-dropdown-menu-title-disabled-text-color | _var(--van-text-color-2)_ | - |
| --van-dropdown-menu-title-padding | _0 var(--van-padding-xs)_ | - | | --van-dropdown-menu-title-padding | _0 var(--van-padding-xs)_ | - |
| --van-dropdown-menu-title-line-height | _var(--van-line-height-lg)_ | - | | --van-dropdown-menu-title-line-height | _var(--van-line-height-lg)_ | - |
| --van-dropdown-menu-option-active-color | _var(--van-danger-color)_ | - | | --van-dropdown-menu-option-active-color | _var(--van-primary-color)_ | - |
| --van-dropdown-menu-content-max-height | _80%_ | - | | --van-dropdown-menu-content-max-height | _80%_ | - |
| --van-dropdown-item-z-index | _10_ | - | | --van-dropdown-item-z-index | _10_ | - |

8
packages/vant/src/dropdown-menu/demo/index.vue
View File

@ -78,17 +78,17 @@ const onConfirm = () => {
<van-dropdown-item :title="t('itemTitle')" ref="item"> <van-dropdown-item :title="t('itemTitle')" ref="item">
<van-cell center :title="t('switchTitle1')"> <van-cell center :title="t('switchTitle1')">
<template #right-icon> <template #right-icon>
<van-switch v-model="switch1" size="24" active-color="#ee0a24" /> <van-switch v-model="switch1" size="24" />
</template> </template>
</van-cell> </van-cell>
<van-cell center :title="t('switchTitle2')"> <van-cell center :title="t('switchTitle2')">
<template #right-icon> <template #right-icon>
<van-switch v-model="switch2" size="24" active-color="#ee0a24" /> <van-switch v-model="switch2" size="24" />
</template> </template>
</van-cell> </van-cell>
<div style="padding: 5px 16px"> <div style="padding: 5px 16px">
<van-button <van-button
type="danger" type="primary"
block block
round round
style="height: 40px" style="height: 40px"
@ -102,7 +102,7 @@ const onConfirm = () => {
</demo-block> </demo-block>
<demo-block :title="t('customActiveColor')"> <demo-block :title="t('customActiveColor')">
<van-dropdown-menu active-color="#1989fa"> <van-dropdown-menu active-color="#ee0a24">
<van-dropdown-item v-model="value1" :options="option1" /> <van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" /> <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu> </van-dropdown-menu>

4
packages/vant/src/dropdown-menu/index.less
View File

@ -4,11 +4,11 @@
--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12); --van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
--van-dropdown-menu-title-font-size: 15px; --van-dropdown-menu-title-font-size: 15px;
--van-dropdown-menu-title-text-color: var(--van-text-color); --van-dropdown-menu-title-text-color: var(--van-text-color);
--van-dropdown-menu-title-active-text-color: var(--van-danger-color); --van-dropdown-menu-title-active-text-color: var(--van-primary-color);
--van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2); --van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);
--van-dropdown-menu-title-padding: 0 var(--van-padding-xs); --van-dropdown-menu-title-padding: 0 var(--van-padding-xs);
--van-dropdown-menu-title-line-height: var(--van-line-height-lg); --van-dropdown-menu-title-line-height: var(--van-line-height-lg);
--van-dropdown-menu-option-active-color: var(--van-danger-color); --van-dropdown-menu-option-active-color: var(--van-primary-color);
--van-dropdown-menu-content-max-height: 80%; --van-dropdown-menu-content-max-height: 80%;
} }