blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-23 15:09:16 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/contact-list/ContactList.tsx
View File

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

11
src/contact-list/README.md
View File

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

11
src/contact-list/README.zh-CN.md
View File

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

7
src/contact-list/index.less
View File

@ -36,6 +36,13 @@
font-size: @contact-list-edit-icon-size; 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 { &__bottom {
position: fixed; position: fixed;
right: 0; right: 0;

8
src/contact-list/test/__snapshots__/demo.spec.ts.snap
View File

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

6
src/contact-list/test/__snapshots__/index.spec.ts.snap
View File

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

1
src/style/var.less
View File

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