style(Tabs): using primary color by default

This commit is contained in:
chenjiahan 2022-01-24 15:19:46 +08:00
parent 41b1cd7185
commit 3b10d66bb9
5 changed files with 23 additions and 11 deletions

View File

@ -8,4 +8,16 @@
**Style**
以下组件的默认色值调整为 `--van-primary-color`
- Calendar
- Cascader
- Dialog
- DropdownMenu
- IndexBar
- Sidebar
- Tabs
其他:
- Button: 默认圆角大小从 `2px` 调整为 `4px`

View File

@ -5,7 +5,7 @@ import VanGridItem from '../../grid-item';
import { ref } from 'vue';
import { useTranslate } from '../../../docs/site/use-translate';
import { Toast } from '../../toast';
import type { CountDownInstance } from '../CountDown';
import type { CountDownInstance } from '..';
const t = useTranslate({
'zh-CN': {
@ -100,7 +100,7 @@ const onFinish = () => Toast(t('finished'));
.colon {
display: inline-block;
margin: 0 4px;
color: var(--van-red);
color: var(--van-primary-color);
}
.block {
@ -109,7 +109,7 @@ const onFinish = () => Toast(t('finished'));
color: #fff;
font-size: 12px;
text-align: center;
background-color: var(--van-red);
background-color: var(--van-primary-color);
border-radius: 4px;
}

View File

@ -239,7 +239,7 @@ export default {
| --- | --- | --- | --- |
| v-model:active | Index of active tab | _number \| string_ | `0` |
| type | Can be set to `line` `card` | _string_ | `line` |
| color | Tab color | _string_ | `#ee0a24` |
| color | Tab color | _string_ | `#1989fa` |
| background | Background color | _string_ | `white` |
| duration | Toggle tab's animation time | _number \| string_ | `0.3` |
| line-width | Width of tab line | _number \| string_ | `40px` |
@ -339,10 +339,10 @@ The component provides the following CSS variables, which can be used to customi
| --van-tab-disabled-text-color | _var(--van-text-color-3)_ | - |
| --van-tab-font-size | _var(--van-font-size-md)_ | - |
| --van-tab-line-height | _var(--van-line-height-md)_ | - |
| --van-tabs-default-color | _var(--van-danger-color)_ | - |
| --van-tabs-default-color | _var(--van-primary-color)_ | - |
| --van-tabs-line-height | _44px_ | - |
| --van-tabs-card-height | _30px_ | - |
| --van-tabs-nav-background | _var(--van-background-light)_ | - |
| --van-tabs-bottom-bar-width | _40px_ | - |
| --van-tabs-bottom-bar-height | _3px_ | - |
| --van-tabs-bottom-bar-color | _var(--van-danger-color)_ | - |
| --van-tabs-bottom-bar-color | _var(--van-primary-color)_ | - |

View File

@ -252,7 +252,7 @@ export default {
| --- | --- | --- | --- |
| v-model:active | 绑定当前选中标签的标识符 | _number \| string_ | `0` |
| type | 样式风格类型,可选值为 `card` | _string_ | `line` |
| color | 标签主题色 | _string_ | `#ee0a24` |
| color | 标签主题色 | _string_ | `#1989fa` |
| background | 标签栏背景色 | _string_ | `white` |
| duration | 动画时间,单位秒,设置为 0 可以禁用动画 | _number \| string_ | `0.3` |
| line-width | 底部条宽度,默认单位 `px` | _number \| string_ | `40px` |
@ -354,13 +354,13 @@ tabsRef.value?.scrollTo(0);
| --van-tab-disabled-text-color | _var(--van-text-color-3)_ | - |
| --van-tab-font-size | _var(--van-font-size-md)_ | - |
| --van-tab-line-height | _var(--van-line-height-md)_ | - |
| --van-tabs-default-color | _var(--van-danger-color)_ | - |
| --van-tabs-default-color | _var(--van-primary-color)_ | - |
| --van-tabs-line-height | _44px_ | - |
| --van-tabs-card-height | _30px_ | - |
| --van-tabs-nav-background | _var(--van-background-light)_ | - |
| --van-tabs-bottom-bar-width | _40px_ | - |
| --van-tabs-bottom-bar-height | _3px_ | - |
| --van-tabs-bottom-bar-color | _var(--van-danger-color)_ | - |
| --van-tabs-bottom-bar-color | _var(--van-primary-color)_ | - |
## 常见问题

View File

@ -4,13 +4,13 @@
--van-tab-disabled-text-color: var(--van-text-color-3);
--van-tab-font-size: var(--van-font-size-md);
--van-tab-line-height: var(--van-line-height-md);
--van-tabs-default-color: var(--van-danger-color);
--van-tabs-default-color: var(--van-primary-color);
--van-tabs-line-height: 44px;
--van-tabs-card-height: 30px;
--van-tabs-nav-background: var(--van-background-light);
--van-tabs-bottom-bar-width: 40px;
--van-tabs-bottom-bar-height: 3px;
--van-tabs-bottom-bar-color: var(--van-danger-color);
--van-tabs-bottom-bar-color: var(--van-primary-color);
}
.van-tab {