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(ContactList): using primary color

Browse Source
This commit is contained in:
chenjiahan 2022-02-18 14:22:25 +08:00
parent 43ae30026a
commit d39f6a898a
7 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/vant/docs/markdown/changelog-v4.zh-CN.md
View File

@ -13,10 +13,13 @@
**Style**
以下组件的默认色值调整为 `--van-primary-color`：
在之前的版本中，Vant 组件有两种色彩风格，一部分采用红色作为主色调，另一部分采用蓝色。为了保持色彩规范的统一，我们在 Vant 4 中对组件的主色调进行了统一，所有组件均采用蓝色作为主色调。
以下组件的默认色值风格由红色调整为蓝色：
- Calendar
- Cascader
- ContactList
- Dialog
- DropdownMenu
- IndexBar
@ -35,6 +38,8 @@
- Card: 调整 `--van-card-price-color` 变量的默认值为 `--van-text-color`
- Card: 调整 `--van-card-desc-color` 变量的默认值为 `--van-text-color-2`
- 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`
- Switch: 移除 `--van-switch-border` 变量
- Switch: 调整 `--van-switch-size` 变量的默认值为 `26px`

4
packages/vant/src/contact-list/ContactList.tsx
View File

@ -63,7 +63,7 @@ export default defineComponent({
if (item.isDefault && props.defaultTagText) {
nodes.push(
<Tag type="danger" round class={bem('item-tag')}>
<Tag type="primary" round class={bem('item-tag')}>
{props.defaultTagText}
</Tag>
);
@ -98,7 +98,7 @@ export default defineComponent({
<Button
round
block
type="danger"
type="primary"
class={bem('add')}
text={props.addText || t('addContact')}
onClick={() => emit('add')}

2
packages/vant/src/contact-list/README.md
View File

@ -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-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-radio-icon-color | _var(--van-danger-color)_ | - |

12
packages/vant/src/contact-list/README.zh-CN.md
View File

@ -109,9 +109,9 @@ import type { ContactListItem, ContactListProps } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ---------------------------------------- | ------------------------- | ---- |
| --van-contact-list-edit-icon-size | _16px_ | - |
| --van-contact-list-add-button-z-index | _999_ | - |
| --van-contact-list-item-padding | _var(--van-padding-md)_ | - |
| --van-contact-list-item-radio-icon-color | _var(--van-danger-color)_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | -------------------------- | ---- |
| --van-contact-list-edit-icon-size | _16px_ | - |
| --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)_ | - |

6
packages/vant/src/contact-list/index.less
View File

@ -1,8 +1,8 @@
body {
--van-contact-list-edit-icon-size: 16px;
--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-radio-icon-color: var(--van-danger-color);
}
.van-contact-list {
@ -42,8 +42,8 @@ body {
&__radio {
.van-radio__icon--checked .van-icon {
background-color: var(--van-contact-list-item-radio-icon-color);
border-color: var(--van-contact-list-item-radio-icon-color);
background-color: var(--van-contact-list-radio-color);
border-color: var(--van-contact-list-radio-color);
}
}

4
packages/vant/src/contact-list/test/__snapshots__/demo.spec.ts.snap
View File

@ -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">
John Snow，13000000000
<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
</span>
</transition-stub>
@ -58,7 +58,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-contact-list__bottom van-safe-area-bottom">
<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">
<span class="van-button__text">

4
packages/vant/src/contact-list/test/__snapshots__/index.spec.ts.snap
View File

@ -14,7 +14,7 @@ exports[`should render ContactList correctly 1`] = `
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
jack，12345678
<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>
</transition-stub>
@ -35,7 +35,7 @@ exports[`should render ContactList correctly 1`] = `
</div>
<div class="van-contact-list__bottom van-safe-area-bottom">
<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">
<span class="van-button__text">