mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
style(DropdownMenu): using primary color by default
This commit is contained in:
parent
84b90b1f4c
commit
37e7c618b8
@ -98,9 +98,9 @@ export default {
|
||||
sliderBarHeight: '4px',
|
||||
sliderButtonWidth: '20px',
|
||||
sliderButtonHeight: '20px',
|
||||
sliderActiveBackgroundColor: '#07c160',
|
||||
sliderActiveBackground: '#07c160',
|
||||
buttonPrimaryBackground: '#07c160',
|
||||
buttonPrimaryBorderColor: '#07c160',
|
||||
buttonPrimaryBackgroundColor: '#07c160',
|
||||
};
|
||||
|
||||
return {
|
||||
|
@ -98,9 +98,9 @@ export default {
|
||||
sliderBarHeight: '4px',
|
||||
sliderButtonWidth: '20px',
|
||||
sliderButtonHeight: '20px',
|
||||
sliderActiveBackgroundColor: '#07c160',
|
||||
sliderActiveBackground: '#07c160',
|
||||
buttonPrimaryBackground: '#07c160',
|
||||
buttonPrimaryBorderColor: '#07c160',
|
||||
buttonPrimaryBackgroundColor: '#07c160',
|
||||
};
|
||||
|
||||
return {
|
||||
|
@ -34,9 +34,9 @@ const themeVars = {
|
||||
sliderBarHeight: '4px',
|
||||
sliderButtonWidth: '20px',
|
||||
sliderButtonHeight: '20px',
|
||||
sliderActiveBackgroundColor: '#07c160',
|
||||
sliderActiveBackground: '#07c160',
|
||||
buttonPrimaryBackground: '#07c160',
|
||||
buttonPrimaryBorderColor: '#07c160',
|
||||
buttonPrimaryBackgroundColor: '#07c160',
|
||||
};
|
||||
</script>
|
||||
|
||||
|
@ -64,7 +64,7 @@ export default {
|
||||
.colon {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: #ee0a24;
|
||||
color: #1989fa;
|
||||
}
|
||||
.block {
|
||||
display: inline-block;
|
||||
@ -72,7 +72,7 @@ export default {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #ee0a24;
|
||||
background-color: #1989fa;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
@ -72,7 +72,7 @@ export default {
|
||||
.colon {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: #ee0a24;
|
||||
color: #1989fa;
|
||||
}
|
||||
.block {
|
||||
display: inline-block;
|
||||
@ -80,7 +80,7 @@ export default {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #ee0a24;
|
||||
background-color: #1989fa;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
@ -17,7 +17,7 @@
|
||||
--van-dialog-has-title-message-padding-top: var(--van-padding-xs);
|
||||
--van-dialog-button-height: 48px;
|
||||
--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 {
|
||||
|
@ -64,16 +64,16 @@ export default {
|
||||
<van-dropdown-item title="Title" ref="item">
|
||||
<van-cell center title="Title">
|
||||
<template #right-icon>
|
||||
<van-switch v-model="switch1" size="24" active-color="#ee0a24" />
|
||||
<van-switch v-model="switch1" size="24" />
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell center title="Title">
|
||||
<template #right-icon>
|
||||
<van-switch v-model="switch2" size="24" active-color="#ee0a24" />
|
||||
<van-switch v-model="switch2" size="24" />
|
||||
</template>
|
||||
</van-cell>
|
||||
<div style="padding: 5px 16px;">
|
||||
<van-button type="danger" block round @click="onConfirm">
|
||||
<van-button type="primary" block round @click="onConfirm">
|
||||
Confirm
|
||||
</van-button>
|
||||
</div>
|
||||
@ -116,7 +116,7 @@ export default {
|
||||
Use `active-color` prop to custom active color of the title and options.
|
||||
|
||||
```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="value2" :options="option2" />
|
||||
</van-dropdown-menu>
|
||||
@ -146,7 +146,7 @@ Use `active-color` prop to custom active color of the title and options.
|
||||
|
||||
| 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` |
|
||||
| z-index | z-index of menu item | _number \| string_ | `10` |
|
||||
| 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-title-font-size | _15px_ | - |
|
||||
| --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-padding | _0 var(--van-padding-xs)_ | - |
|
||||
| --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-item-z-index | _10_ | - |
|
||||
|
@ -66,16 +66,16 @@ export default {
|
||||
<van-dropdown-item title="筛选" ref="item">
|
||||
<van-cell center title="包邮">
|
||||
<template #right-icon>
|
||||
<van-switch v-model="switch1" size="24" active-color="#ee0a24" />
|
||||
<van-switch v-model="switch1" size="24" />
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell center title="团购">
|
||||
<template #right-icon>
|
||||
<van-switch v-model="switch2" size="24" active-color="#ee0a24" />
|
||||
<van-switch v-model="switch2" size="24" />
|
||||
</template>
|
||||
</van-cell>
|
||||
<div style="padding: 5px 16px;">
|
||||
<van-button type="danger" block round @click="onConfirm">
|
||||
<van-button type="primary" block round @click="onConfirm">
|
||||
确认
|
||||
</van-button>
|
||||
</div>
|
||||
@ -118,7 +118,7 @@ export default {
|
||||
通过 `active-color` 属性可以自定义菜单标题和选项的选中态颜色。
|
||||
|
||||
```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="value2" :options="option2" />
|
||||
</van-dropdown-menu>
|
||||
@ -150,7 +150,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| active-color | 菜单标题和选项的选中态颜色 | _string_ | `#ee0a24` |
|
||||
| active-color | 菜单标题和选项的选中态颜色 | _string_ | `#1989fa` |
|
||||
| direction | 菜单展开方向,可选值为`up` | _string_ | `down` |
|
||||
| z-index | 菜单栏 z-index 层级 | _number \| string_ | `10` |
|
||||
| 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-title-font-size | _15px_ | - |
|
||||
| --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-padding | _0 var(--van-padding-xs)_ | - |
|
||||
| --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-item-z-index | _10_ | - |
|
||||
|
||||
|
@ -78,17 +78,17 @@ const onConfirm = () => {
|
||||
<van-dropdown-item :title="t('itemTitle')" ref="item">
|
||||
<van-cell center :title="t('switchTitle1')">
|
||||
<template #right-icon>
|
||||
<van-switch v-model="switch1" size="24" active-color="#ee0a24" />
|
||||
<van-switch v-model="switch1" size="24" />
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell center :title="t('switchTitle2')">
|
||||
<template #right-icon>
|
||||
<van-switch v-model="switch2" size="24" active-color="#ee0a24" />
|
||||
<van-switch v-model="switch2" size="24" />
|
||||
</template>
|
||||
</van-cell>
|
||||
<div style="padding: 5px 16px">
|
||||
<van-button
|
||||
type="danger"
|
||||
type="primary"
|
||||
block
|
||||
round
|
||||
style="height: 40px"
|
||||
@ -102,7 +102,7 @@ const onConfirm = () => {
|
||||
</demo-block>
|
||||
|
||||
<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="value2" :options="option2" />
|
||||
</van-dropdown-menu>
|
||||
|
@ -4,11 +4,11 @@
|
||||
--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
|
||||
--van-dropdown-menu-title-font-size: 15px;
|
||||
--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-padding: 0 var(--van-padding-xs);
|
||||
--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%;
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user