feat(ContactList): add @contact-list-item-radio-icon-color var (#8322)

This commit is contained in:
neverland 2021-03-11 21:15:55 +08:00 committed by GitHub
parent dcd5f08b3b
commit 27a52949fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 26 additions and 21 deletions

View File

@ -2,7 +2,6 @@ import { PropType, defineComponent } from 'vue';
// Utils
import { createNamespace, UnknownProp } from '../utils';
import { RED } from '../utils/constant';
// Components
import { Tag } from '../tag';
@ -41,7 +40,7 @@ export default defineComponent({
};
const renderRightIcon = () => (
<Radio name={item.id} iconSize={16} checkedColor={RED} />
<Radio class={bem('radio')} name={item.id} iconSize={16} />
);
const renderEditIcon = () => (

View File

@ -95,7 +95,8 @@ export default {
How to use: [Custom Theme](#/en-US/theme).
| Name | Default Value | Description |
| -------------------------------- | ------------- | ----------- |
| ----------------------------------- | ------------- | ----------- |
| @contact-list-edit-icon-size | `16px` | - |
| @contact-list-add-button-z-index | `999` | - |
| @contact-list-item-padding | `@padding-md` | - |
| @contact-list-item-radio-icon-color | `@red` | - |

View File

@ -99,7 +99,8 @@ export default {
组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考[主题定制](#/zh-CN/theme)。
| 名称 | 默认值 | 描述 |
| -------------------------------- | ------------- | ---- |
| ----------------------------------- | ------------- | ---- |
| @contact-list-edit-icon-size | `16px` | - |
| @contact-list-add-button-z-index | `999` | - |
| @contact-list-item-padding | `@padding-md` | - |
| @contact-list-item-radio-icon-color | `@red` | - |

View File

@ -36,6 +36,13 @@
font-size: @contact-list-edit-icon-size;
}
&__radio {
.van-radio__icon--checked .van-icon {
background-color: @contact-list-item-radio-icon-color;
border-color: @contact-list-item-radio-icon-color;
}
}
&__bottom {
position: fixed;
right: 0;

View File

@ -21,16 +21,14 @@ exports[`should render demo and match snapshot 1`] = `
</transition-stub>
</div>
<div role="radio"
class="van-radio"
class="van-radio van-contact-list__radio"
tabindex="0"
aria-checked="true"
>
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
style="font-size: 16px;"
>
<i class="van-badge__wrapper van-icon van-icon-success"
style="border-color: #ee0a24; background-color: rgb(238, 10, 36);"
>
<i class="van-badge__wrapper van-icon van-icon-success">
</i>
</div>
</div>
@ -45,7 +43,7 @@ exports[`should render demo and match snapshot 1`] = `
Ned Stark1310000000
</div>
<div role="radio"
class="van-radio"
class="van-radio van-contact-list__radio"
tabindex="0"
aria-checked="false"
>

View File

@ -15,16 +15,14 @@ exports[`should render ContactList correctly 1`] = `
jack12345678
</div>
<div role="radio"
class="van-radio"
class="van-radio van-contact-list__radio"
tabindex="0"
aria-checked="true"
>
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
style="font-size: 16px;"
>
<i class="van-badge__wrapper van-icon van-icon-success"
style="border-color: #ee0a24; background-color: rgb(238, 10, 36);"
>
<i class="van-badge__wrapper van-icon van-icon-success">
</i>
</div>
</div>

View File

@ -294,6 +294,7 @@
@contact-list-edit-icon-size: 16px;
@contact-list-add-button-z-index: 999;
@contact-list-item-padding: @padding-md;
@contact-list-item-radio-icon-color: @red;
// CountDown
@count-down-text-color: @text-color;