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

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. Use `color` prop to custom calendar color.
```html ```html
<van-calendar v-model="show" color="#07c160" /> <van-calendar v-model="show" color="#1989fa" />
``` ```
### Custom Date Range ### Custom Date Range

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

@ -113,7 +113,7 @@ export default {
通过 `color` 属性可以自定义日历的颜色，对选中日期和底部按钮生效。 通过 `color` 属性可以自定义日历的颜色，对选中日期和底部按钮生效。
```html ```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> </template>
<script> <script>
import { GREEN } from '../../utils/constant'; import { BLUE } from '../../utils/constant';
export default { export default {
i18n: { i18n: {
@ -235,7 +235,7 @@ export default {
this.showConfirm = false; this.showConfirm = false;
break; break;
case 'customColor': case 'customColor':
this.color = GREEN; this.color = BLUE;
break; break;
case 'customConfirm': case 'customConfirm':
this.confirmText = this.t('confirmText'); this.confirmText = this.t('confirmText');

2
src/checkbox/README.md
View File

@ -43,7 +43,7 @@ export default {
### Custom Color ### Custom Color
```html ```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 ### Custom Icon Size

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

@ -55,7 +55,7 @@ export default {
通过 `checked-color` 属性设置选中状态的图标颜色。 通过 `checked-color` 属性设置选中状态的图标颜色。
```html ```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>
<demo-block :title="t('customColor')"> <demo-block :title="t('customColor')">
<van-checkbox v-model="checkbox2" checked-color="#07c160"> <van-checkbox v-model="checkbox2" checked-color="#ee0a24">
{{ t('customColor') }} {{ t('customColor') }}
</van-checkbox> </van-checkbox>
</demo-block> </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> <div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox"> <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"> <!----></i></div><span class="van-checkbox__label">
自定义颜色 自定义颜色
</span> </span>

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

@ -57,7 +57,7 @@ Use `badge` prop to show badge in icon.
```html ```html
<van-goods-action> <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="cart-o" text="Icon2" />
<van-goods-action-icon icon="star" text="Collected" color="#ff5000" /> <van-goods-action-icon icon="star" text="Collected" color="#ff5000" />
<van-goods-action-button type="warning" text="Button" /> <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 ```html
<van-goods-action> <van-goods-action>
@ -59,11 +59,11 @@ export default {
### 自定义图标颜色 ### 自定义图标颜色
通过 GoodsActionIcon 的`color`属性可以自定义图标的颜色。 通过 GoodsActionIcon 的 `color` 属性可以自定义图标的颜色。
```html ```html
<van-goods-action> <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="cart-o" text="购物车" />
<van-goods-action-icon icon="star" text="已收藏" color="#ff5000" /> <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
<van-goods-action-button type="warning" text="加入购物车" /> <van-goods-action-button type="warning" text="加入购物车" />

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

@ -40,7 +40,7 @@
<van-goods-action-icon <van-goods-action-icon
icon="chat-o" icon="chat-o"
:text="t('icon1')" :text="t('icon1')"
color="#07c160" color="#ee0a24"
/> />
<van-goods-action-icon icon="cart-o" :text="t('icon2')" /> <van-goods-action-icon icon="cart-o" :text="t('icon2')" />
<van-goods-action-icon <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>
<div class="van-goods-action"> <div class="van-goods-action">
<div role="button" tabindex="0" class="van-goods-action-icon"> <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>客服
</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. Use `color` prop to set icon color.
```html ```html
<van-icon name="chat-o" color="#1989fa" /> <van-icon name="cart-o" color="#1989fa" />
<van-icon name="chat-o" color="#07c160" /> <van-icon name="fire-o" color="#ee0a24" />
``` ```
### Icon Size ### Icon Size

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

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

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

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

4
src/radio/README.md
View File

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

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

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

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

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

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

@ -53,7 +53,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div role="radiogroup" class="demo-radio-group van-radio-group"> <div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio"> <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"> <!----></i></div><span class="van-radio__label">
单选框 1 单选框 1
</span> </span>
@ -69,7 +69,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div role="radiogroup" class="demo-radio-group van-radio-group"> <div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio"> <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"> <!----></i></div><span class="van-radio__label">
单选框 1 单选框 1
</span> </span>

2
src/switch/README.md
View File

@ -48,7 +48,7 @@ export default {
### Custom Color ### Custom Color
```html ```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 ### Async Control

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

@ -62,7 +62,7 @@ export default {
`active-color` 属性表示打开时的背景色，`inactive-color` 表示关闭时的背景色。 `active-color` 属性表示打开时的背景色，`inactive-color` 表示关闭时的背景色。
```html ```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')"> <demo-block :title="t('customColor')">
<van-switch <van-switch
v-model="checked3" v-model="checked3"
active-color="#07c160" active-color="#ee0a24"
inactive-color="#ee0a24" inactive-color="#dcdee0"
/> />
</demo-block> </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>
<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 class="van-switch__node"></div>
</div> </div>
</div> </div>

2
src/tabbar/README.md
View File

@ -99,7 +99,7 @@ export default {
### Custom Color ### Custom Color
```html ```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="home-o">Tab</van-tabbar-item>
<van-tabbar-item icon="search">Tab</van-tabbar-item> <van-tabbar-item icon="search">Tab</van-tabbar-item>
<van-tabbar-item icon="friends-o">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 ```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="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item> <van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签</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')"> <demo-block :title="t('customColor')">
<van-tabbar <van-tabbar
v-model="active4" v-model="active4"
active-color="#07c160" active-color="#ee0a24"
inactive-color="#000" inactive-color="#000"
> >
<van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item> <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> <div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed"> <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"> <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
<!----></i> <!----></i>
<!----> <!---->

1
src/utils/constant.ts
View File

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