mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
style(ContactList): using primary color
This commit is contained in:
parent
43ae30026a
commit
d39f6a898a
@ -13,10 +13,13 @@
|
|||||||
|
|
||||||
**Style**
|
**Style**
|
||||||
|
|
||||||
以下组件的默认色值调整为 `--van-primary-color`:
|
在之前的版本中,Vant 组件有两种色彩风格,一部分采用红色作为主色调,另一部分采用蓝色。为了保持色彩规范的统一,我们在 Vant 4 中对组件的主色调进行了统一,所有组件均采用蓝色作为主色调。
|
||||||
|
|
||||||
|
以下组件的默认色值风格由红色调整为蓝色:
|
||||||
|
|
||||||
- Calendar
|
- Calendar
|
||||||
- Cascader
|
- Cascader
|
||||||
|
- ContactList
|
||||||
- Dialog
|
- Dialog
|
||||||
- DropdownMenu
|
- DropdownMenu
|
||||||
- IndexBar
|
- IndexBar
|
||||||
@ -35,6 +38,8 @@
|
|||||||
- Card: 调整 `--van-card-price-color` 变量的默认值为 `--van-text-color`
|
- Card: 调整 `--van-card-price-color` 变量的默认值为 `--van-text-color`
|
||||||
- Card: 调整 `--van-card-desc-color` 变量的默认值为 `--van-text-color-2`
|
- Card: 调整 `--van-card-desc-color` 变量的默认值为 `--van-text-color-2`
|
||||||
- ContactEdit: 提交按钮调整为 `primary` 类型
|
- ContactEdit: 提交按钮调整为 `primary` 类型
|
||||||
|
- ContactList: 提交按钮调整为 `primary` 类型
|
||||||
|
- ContactList: 重命名 `--van-contact-list-item-radio-icon-color` 为 `--van-contact-list-radio-color`
|
||||||
- Field: 调整 `--van-field-label-color` 变量的默认值为 `--van-text-color`
|
- Field: 调整 `--van-field-label-color` 变量的默认值为 `--van-text-color`
|
||||||
- Switch: 移除 `--van-switch-border` 变量
|
- Switch: 移除 `--van-switch-border` 变量
|
||||||
- Switch: 调整 `--van-switch-size` 变量的默认值为 `26px`
|
- Switch: 调整 `--van-switch-size` 变量的默认值为 `26px`
|
||||||
|
@ -63,7 +63,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
if (item.isDefault && props.defaultTagText) {
|
if (item.isDefault && props.defaultTagText) {
|
||||||
nodes.push(
|
nodes.push(
|
||||||
<Tag type="danger" round class={bem('item-tag')}>
|
<Tag type="primary" round class={bem('item-tag')}>
|
||||||
{props.defaultTagText}
|
{props.defaultTagText}
|
||||||
</Tag>
|
</Tag>
|
||||||
);
|
);
|
||||||
@ -98,7 +98,7 @@ export default defineComponent({
|
|||||||
<Button
|
<Button
|
||||||
round
|
round
|
||||||
block
|
block
|
||||||
type="danger"
|
type="primary"
|
||||||
class={bem('add')}
|
class={bem('add')}
|
||||||
text={props.addText || t('addContact')}
|
text={props.addText || t('addContact')}
|
||||||
onClick={() => emit('add')}
|
onClick={() => emit('add')}
|
||||||
|
@ -113,5 +113,5 @@ The component provides the following CSS variables, which can be used to customi
|
|||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| --van-contact-list-edit-icon-size | _16px_ | - |
|
| --van-contact-list-edit-icon-size | _16px_ | - |
|
||||||
| --van-contact-list-add-button-z-index | _999_ | - |
|
| --van-contact-list-add-button-z-index | _999_ | - |
|
||||||
|
| --van-contact-list-radio-color | _var(--van-primary-color)_ | - |
|
||||||
| --van-contact-list-item-padding | _var(--van-padding-md)_ | - |
|
| --van-contact-list-item-padding | _var(--van-padding-md)_ | - |
|
||||||
| --van-contact-list-item-radio-icon-color | _var(--van-danger-color)_ | - |
|
|
||||||
|
@ -109,9 +109,9 @@ import type { ContactListItem, ContactListProps } from 'vant';
|
|||||||
|
|
||||||
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
|
||||||
|
|
||||||
| 名称 | 默认值 | 描述 |
|
| 名称 | 默认值 | 描述 |
|
||||||
| ---------------------------------------- | ------------------------- | ---- |
|
| ------------------------------------- | -------------------------- | ---- |
|
||||||
| --van-contact-list-edit-icon-size | _16px_ | - |
|
| --van-contact-list-edit-icon-size | _16px_ | - |
|
||||||
| --van-contact-list-add-button-z-index | _999_ | - |
|
| --van-contact-list-add-button-z-index | _999_ | - |
|
||||||
| --van-contact-list-item-padding | _var(--van-padding-md)_ | - |
|
| --van-contact-list-radio-color | _var(--van-primary-color)_ | - |
|
||||||
| --van-contact-list-item-radio-icon-color | _var(--van-danger-color)_ | - |
|
| --van-contact-list-item-padding | _var(--van-padding-md)_ | - |
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
body {
|
body {
|
||||||
--van-contact-list-edit-icon-size: 16px;
|
--van-contact-list-edit-icon-size: 16px;
|
||||||
--van-contact-list-add-button-z-index: 999;
|
--van-contact-list-add-button-z-index: 999;
|
||||||
|
--van-contact-list-radio-color: var(--van-primary-color);
|
||||||
--van-contact-list-item-padding: var(--van-padding-md);
|
--van-contact-list-item-padding: var(--van-padding-md);
|
||||||
--van-contact-list-item-radio-icon-color: var(--van-danger-color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-contact-list {
|
.van-contact-list {
|
||||||
@ -42,8 +42,8 @@ body {
|
|||||||
|
|
||||||
&__radio {
|
&__radio {
|
||||||
.van-radio__icon--checked .van-icon {
|
.van-radio__icon--checked .van-icon {
|
||||||
background-color: var(--van-contact-list-item-radio-icon-color);
|
background-color: var(--van-contact-list-radio-color);
|
||||||
border-color: var(--van-contact-list-item-radio-icon-color);
|
border-color: var(--van-contact-list-radio-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -15,7 +15,7 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
|
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
|
||||||
John Snow,13000000000
|
John Snow,13000000000
|
||||||
<transition-stub class="van-contact-list__item-tag">
|
<transition-stub class="van-contact-list__item-tag">
|
||||||
<span class="van-tag van-tag--round van-tag--danger">
|
<span class="van-tag van-tag--round van-tag--primary">
|
||||||
default
|
default
|
||||||
</span>
|
</span>
|
||||||
</transition-stub>
|
</transition-stub>
|
||||||
@ -58,7 +58,7 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
<div class="van-contact-list__bottom van-safe-area-bottom">
|
<div class="van-contact-list__bottom van-safe-area-bottom">
|
||||||
<button type="button"
|
<button type="button"
|
||||||
class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"
|
class="van-button van-button--primary van-button--normal van-button--block van-button--round van-contact-list__add"
|
||||||
>
|
>
|
||||||
<div class="van-button__content">
|
<div class="van-button__content">
|
||||||
<span class="van-button__text">
|
<span class="van-button__text">
|
||||||
|
@ -14,7 +14,7 @@ exports[`should render ContactList correctly 1`] = `
|
|||||||
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
|
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
|
||||||
jack,12345678
|
jack,12345678
|
||||||
<transition-stub class="van-contact-list__item-tag">
|
<transition-stub class="van-contact-list__item-tag">
|
||||||
<span class="van-tag van-tag--round van-tag--danger">
|
<span class="van-tag van-tag--round van-tag--primary">
|
||||||
默认
|
默认
|
||||||
</span>
|
</span>
|
||||||
</transition-stub>
|
</transition-stub>
|
||||||
@ -35,7 +35,7 @@ exports[`should render ContactList correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
<div class="van-contact-list__bottom van-safe-area-bottom">
|
<div class="van-contact-list__bottom van-safe-area-bottom">
|
||||||
<button type="button"
|
<button type="button"
|
||||||
class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"
|
class="van-button van-button--primary van-button--normal van-button--block van-button--round van-contact-list__add"
|
||||||
>
|
>
|
||||||
<div class="van-button__content">
|
<div class="van-button__content">
|
||||||
<span class="van-button__text">
|
<span class="van-button__text">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user