blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

docs: uniform color

Browse Source
This commit is contained in:
chenjiahan 2020-11-30 22:39:37 +08:00 committed by neverland
parent aad0559064
commit bb18310f1b
27 changed files with 42 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/calendar/README.md
View File

@ -111,7 +111,7 @@ Set `show-confirm` to `false` to hide the confirm button. In this case, the `con
Use `color` prop to custom calendar color.
```html
<van-calendar v-model="show" color="#07c160" />
<van-calendar v-model="show" color="#1989fa" />
```
### Custom Date Range

2
src/calendar/README.zh-CN.md
View File

@ -113,7 +113,7 @@ export default {
通过 `color` 属性可以自定义日历的颜色，对选中日期和底部按钮生效。
```html
<van-calendar v-model="show" color="#07c160" />
<van-calendar v-model="show" color="#1989fa" />
```
### 自定义日期范围

4
src/calendar/demo/index.vue
View File

@ -121,7 +121,7 @@
</template>
<script>
import { GREEN } from '../../utils/constant';
import { BLUE } from '../../utils/constant';
export default {
i18n: {
@ -235,7 +235,7 @@ export default {
this.showConfirm = false;
break;
case 'customColor':
this.color = GREEN;
this.color = BLUE;
break;
case 'customConfirm':
this.confirmText = this.t('confirmText');

2
src/checkbox/README.md
View File

@ -43,7 +43,7 @@ export default {
### Custom Color
```html
<van-checkbox v-model="checked" checked-color="#07c160">Checkbox</van-checkbox>
<van-checkbox v-model="checked" checked-color="#ee0a24">Checkbox</van-checkbox>
```
### Custom Icon Size

2
src/checkbox/README.zh-CN.md
View File

@ -55,7 +55,7 @@ export default {
通过 `checked-color` 属性设置选中状态的图标颜色。
```html
<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
<van-checkbox v-model="checked" checked-color="#ee0a24">复选框</van-checkbox>
```
### 自定义大小

2
src/checkbox/demo/index.vue
View File

@ -20,7 +20,7 @@
</demo-block>
<demo-block :title="t('customColor')">
<van-checkbox v-model="checkbox2" checked-color="#07c160">
<van-checkbox v-model="checkbox2" checked-color="#ee0a24">
{{ t('customColor') }}
</van-checkbox>
</demo-block>

2
src/checkbox/test/__snapshots__/demo.spec.js.snap
View File

@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
<!----></i></div><span class="van-checkbox__label">
自定义颜色
</span>

2
src/goods-action/README.md
View File

@ -57,7 +57,7 @@ Use `badge` prop to show badge in icon.
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="Icon1" color="#07c160" />
<van-goods-action-icon icon="chat-o" text="Icon1" color="#ee0a24" />
<van-goods-action-icon icon="cart-o" text="Icon2" />
<van-goods-action-icon icon="star" text="Collected" color="#ff5000" />
<van-goods-action-button type="warning" text="Button" />

6
src/goods-action/README.zh-CN.md
View File

@ -45,7 +45,7 @@ export default {
### 徽标提示
在 GoodsActionIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标。
在 GoodsActionIcon 组件上设置 `dot` 属性后，会在图标右上角展示一个小红点。设置 `badge` 属性后，会在图标右上角展示相应的徽标。
```html
<van-goods-action>
@ -59,11 +59,11 @@ export default {
### 自定义图标颜色
通过 GoodsActionIcon 的`color`属性可以自定义图标的颜色。
通过 GoodsActionIcon 的 `color` 属性可以自定义图标的颜色。
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
<van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
<van-goods-action-icon icon="cart-o" text="购物车" />
<van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
<van-goods-action-button type="warning" text="加入购物车" />

2
src/goods-action/demo/index.vue
View File

@ -40,7 +40,7 @@
<van-goods-action-icon
icon="chat-o"
:text="t('icon1')"
color="#07c160"
color="#ee0a24"
/>
<van-goods-action-icon icon="cart-o" :text="t('icon2')" />
<van-goods-action-icon

2
src/goods-action/test/__snapshots__/demo.spec.js.snap
View File

@ -49,7 +49,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-goods-action">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-chat-o van-goods-action-icon__icon" style="color: rgb(7, 193, 96);">
<div class="van-icon van-icon-chat-o van-goods-action-icon__icon" style="color: rgb(238, 10, 36);">
<!---->
</div>客服
</div>

4
src/icon/README.md
View File

@ -37,8 +37,8 @@ Use `badge` prop, the badge will be displayed in the upper right corner of the i
Use `color` prop to set icon color.
```html
<van-icon name="chat-o" color="#1989fa" />
<van-icon name="chat-o" color="#07c160" />
<van-icon name="cart-o" color="#1989fa" />
<van-icon name="fire-o" color="#ee0a24" />
```
### Icon Size

4
src/icon/README.zh-CN.md
View File

@ -39,8 +39,8 @@ Vue.use(Icon);
`Icon` 的 `color` 属性用来设置图标的颜色。
```html
<van-icon name="chat-o" color="#1989fa" />
<van-icon name="chat-o" color="#07c160" />
<van-icon name="cart-o" color="#1989fa" />
<van-icon name="fire-o" color="#ee0a24" />
```
### 图标大小

10
src/icon/demo/index.vue
View File

@ -25,10 +25,10 @@
<demo-block :title="t('color')">
<van-col span="6" @click="copy(demoIcon, { color: BLUE })">
<van-icon :name="demoIcon" :color="BLUE" />
<van-icon name="cart-o" :color="BLUE" />
</van-col>
<van-col span="6" @click="copy(demoIcon, { color: GREEN })">
<van-icon :name="demoIcon" :color="GREEN" />
<van-col span="6" @click="copy(demoIcon, { color: RED })">
<van-icon name="fire-o" :color="RED" />
</van-col>
</demo-block>
@ -83,7 +83,7 @@
<script>
import icons from '@vant/icons';
import { BLUE, GREEN } from '../../utils/constant';
import { RED, BLUE } from '../../utils/constant';
// from https://30secondsofcode.org
function copyToClipboard(str) {
@ -136,8 +136,8 @@ export default {
},
data() {
this.RED = RED;
this.BLUE = BLUE;
this.GREEN = GREEN;
this.icons = icons;
return {
tab: 0,

4
src/radio/README.md
View File

@ -64,8 +64,8 @@ export default {
```html
<van-radio-group v-model="radio">
<van-radio name="1" checked-color="#07c160">Radio 1</van-radio>
<van-radio name="2" checked-color="#07c160">Radio 2</van-radio>
<van-radio name="1" checked-color="#ee0a24">Radio 1</van-radio>
<van-radio name="2" checked-color="#ee0a24">Radio 2</van-radio>
</van-radio-group>
```

4
src/radio/README.zh-CN.md
View File

@ -76,8 +76,8 @@ export default {
```html
<van-radio-group v-model="radio">
<van-radio name="1" checked-color="#07c160">单选框 1</van-radio>
<van-radio name="2" checked-color="#07c160">单选框 2</van-radio>
<van-radio name="1" checked-color="#ee0a24">单选框 1</van-radio>
<van-radio name="2" checked-color="#ee0a24">单选框 2</van-radio>
</van-radio-group>
```

12
src/radio/demo/index.vue
View File

@ -34,10 +34,10 @@
<demo-block :title="t('customColor')">
<van-radio-group v-model="radio3" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160">
<van-radio name="1" checked-color="#ee0a24">
{{ t('radio') }} 1
</van-radio>
<van-radio name="2" checked-color="#07c160">
<van-radio name="2" checked-color="#ee0a24">
{{ t('radio') }} 2
</van-radio>
</van-radio-group>
@ -45,12 +45,8 @@
<demo-block :title="t('customIconSize')">
<van-radio-group v-model="radioIconSize" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160" icon-size="24px">
{{ t('radio') }} 1
</van-radio>
<van-radio name="2" checked-color="#07c160" icon-size="24px">
{{ t('radio') }} 2
</van-radio>
<van-radio name="1" icon-size="24px"> {{ t('radio') }} 1 </van-radio>
<van-radio name="2" icon-size="24px"> {{ t('radio') }} 2 </van-radio>
</van-radio-group>
</demo-block>

4
src/radio/test/__snapshots__/demo.spec.js.snap
View File

@ -53,7 +53,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
<!----></i></div><span class="van-radio__label">
单选框 1
</span>
@ -69,7 +69,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">
单选框 1
</span>

2
src/switch/README.md
View File

@ -48,7 +48,7 @@ export default {
### Custom Color
```html
<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />
```
### Async Control

2
src/switch/README.zh-CN.md
View File

@ -62,7 +62,7 @@ export default {
`active-color` 属性表示打开时的背景色，`inactive-color` 表示关闭时的背景色。
```html
<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />
```
### 异步控制

4
src/switch/demo/index.vue
View File

@ -19,8 +19,8 @@
<demo-block :title="t('customColor')">
<van-switch
v-model="checked3"
active-color="#07c160"
inactive-color="#ee0a24"
active-color="#ee0a24"
inactive-color="#dcdee0"
/>
</demo-block>

2
src/switch/test/__snapshots__/demo.spec.js.snap
View File

@ -25,7 +25,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="background-color: rgb(7, 193, 96);">
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="background-color: rgb(238, 10, 36);">
<div class="van-switch__node"></div>
</div>
</div>

2
src/tabbar/README.md
View File

@ -99,7 +99,7 @@ export default {
### Custom Color
```html
<van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
<van-tabbar-item icon="home-o">Tab</van-tabbar-item>
<van-tabbar-item icon="search">Tab</van-tabbar-item>
<van-tabbar-item icon="friends-o">Tab</van-tabbar-item>

2
src/tabbar/README.zh-CN.md
View File

@ -105,7 +105,7 @@ export default {
### 自定义颜色
```html
<van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>

2
src/tabbar/demo/index.vue
View File

@ -55,7 +55,7 @@
<demo-block :title="t('customColor')">
<van-tabbar
v-model="active4"
active-color="#07c160"
active-color="#ee0a24"
inactive-color="#000"
>
<van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>

2
src/tabbar/test/__snapshots__/demo.spec.js.snap
View File

@ -136,7 +136,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item van-tabbar-item--active" style="color: rgb(7, 193, 96);">
<div class="van-tabbar-item van-tabbar-item--active" style="color: rgb(238, 10, 36);">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
<!----></i>
<!---->

1
src/utils/constant.ts
View File

@ -1,7 +1,6 @@
// color
export const RED = '#ee0a24';
export const BLUE = '#1989fa';
export const GREEN = '#07c160';
export const WHITE = '#fff';
// border