style(DropdownMenu): adjust default active color to @red (#6863)

This commit is contained in:
neverland 2020-07-24 17:45:20 +08:00 committed by GitHub
parent b43b8fc943
commit e12b468843
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 9 deletions

View File

@ -50,7 +50,11 @@ export default {
<van-dropdown-item title="Title" ref="item"> <van-dropdown-item title="Title" ref="item">
<van-switch-cell v-model="switch1" title="Title" /> <van-switch-cell v-model="switch1" title="Title" />
<van-switch-cell v-model="switch2" title="Title" /> <van-switch-cell v-model="switch2" title="Title" />
<van-button block type="info" @click="onConfirm">Confirm</van-button> <div style="padding: 5px 16px;">
<van-button type="danger" block round @click="onConfirm">
Confirm
</van-button>
</div>
</van-dropdown-item> </van-dropdown-item>
</van-dropdown-menu> </van-dropdown-menu>
``` ```
@ -112,7 +116,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_ | `#1989fa` | | active-color | Active color of title and option | _string_ | `#ee0a24` |
| direction `v2.0.1` | Expand direction, can be set to `up` | _string_ | `down` | | direction `v2.0.1` | 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` |

View File

@ -52,7 +52,11 @@ export default {
<van-dropdown-item title="筛选" ref="item"> <van-dropdown-item title="筛选" ref="item">
<van-switch-cell v-model="switch1" title="包邮" /> <van-switch-cell v-model="switch1" title="包邮" />
<van-switch-cell v-model="switch2" title="团购" /> <van-switch-cell v-model="switch2" title="团购" />
<van-button block type="info" @click="onConfirm">确认</van-button> <div style="padding: 5px 16px;">
<van-button type="danger" block round @click="onConfirm">
确认
</van-button>
</div>
</van-dropdown-item> </van-dropdown-item>
</van-dropdown-menu> </van-dropdown-menu>
``` ```
@ -116,7 +120,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| active-color | 菜单标题和选项的选中态颜色 | _string_ | `#1989fa` | | active-color | 菜单标题和选项的选中态颜色 | _string_ | `#ee0a24` |
| direction `v2.0.1` | 菜单展开方向,可选值为`up` | _string_ | `down` | | direction `v2.0.1` | 菜单展开方向,可选值为`up` | _string_ | `down` |
| z-index | 菜单栏 z-index 层级 | _number \| string_ | `10` | | z-index | 菜单栏 z-index 层级 | _number \| string_ | `10` |
| duration | 动画时长,单位秒 | _number \| string_ | `0.2` | | duration | 动画时长,单位秒 | _number \| string_ | `0.2` |

View File

@ -13,9 +13,17 @@
<van-dropdown-item :title="t('itemTitle')" ref="item"> <van-dropdown-item :title="t('itemTitle')" ref="item">
<van-switch-cell v-model="switch1" :title="t('switchTitle1')" /> <van-switch-cell v-model="switch1" :title="t('switchTitle1')" />
<van-switch-cell v-model="switch2" :title="t('switchTitle2')" /> <van-switch-cell v-model="switch2" :title="t('switchTitle2')" />
<van-button type="info" block @click="onConfirm"> <div style="padding: 5px 16px;">
<van-button
type="danger"
block
round
style="height: 40px;"
@click="onConfirm"
>
{{ t('confirm') }} {{ t('confirm') }}
</van-button> </van-button>
</div>
</van-dropdown-item> </van-dropdown-item>
</van-dropdown-menu> </van-dropdown-menu>
</demo-block> </demo-block>

View File

@ -331,11 +331,11 @@
@dropdown-menu-background-color: @white; @dropdown-menu-background-color: @white;
@dropdown-menu-title-font-size: 15px; @dropdown-menu-title-font-size: 15px;
@dropdown-menu-title-text-color: @text-color; @dropdown-menu-title-text-color: @text-color;
@dropdown-menu-title-active-text-color: @blue; @dropdown-menu-title-active-text-color: @red;
@dropdown-menu-title-disabled-text-color: @gray-6; @dropdown-menu-title-disabled-text-color: @gray-6;
@dropdown-menu-title-padding: 0 @padding-xs; @dropdown-menu-title-padding: 0 @padding-xs;
@dropdown-menu-title-line-height: @line-height-lg; @dropdown-menu-title-line-height: @line-height-lg;
@dropdown-menu-option-active-color: @blue; @dropdown-menu-option-active-color: @red;
@dropdown-menu-content-max-height: 80%; @dropdown-menu-content-max-height: 80%;
@dropdown-item-z-index: 10; @dropdown-item-z-index: 10;