style(Sidebar): using primary color by default

This commit is contained in:
chenjiahan 2022-01-24 15:18:28 +08:00
parent 8b95db1574
commit eeb233bf99
7 changed files with 14 additions and 14 deletions

View File

@ -10,7 +10,7 @@
--van-sidebar-selected-text-color: var(--van-text-color);
--van-sidebar-selected-border-width: 4px;
--van-sidebar-selected-border-height: 16px;
--van-sidebar-selected-border-color: var(--van-danger-color);
--van-sidebar-selected-border-color: var(--van-primary-color);
--van-sidebar-selected-background: var(--van-background-light);
}

View File

@ -46,7 +46,7 @@ export default {
<van-sidebar v-model="active">
<van-sidebar-item title="Title" dot />
<van-sidebar-item title="Title" badge="5" />
<van-sidebar-item title="Title" badge="20" />
<van-sidebar-item title="Title" />
</van-sidebar>
```
@ -153,5 +153,5 @@ The component provides the following CSS variables, which can be used to customi
| --van-sidebar-selected-text-color | _var(--van-text-color)_ | - |
| --van-sidebar-selected-border-width | _4px_ | - |
| --van-sidebar-selected-border-height | _16px_ | - |
| --van-sidebar-selected-border-color | _var(--van-danger-color)_ | - |
| --van-sidebar-selected-border-color | _var(--van-primary-color)_ | - |
| --van-sidebar-selected-background | _var(--van-background-light)_ | - |

View File

@ -50,7 +50,7 @@ export default {
<van-sidebar v-model="active">
<van-sidebar-item title="标签名称" dot />
<van-sidebar-item title="标签名称" badge="5" />
<van-sidebar-item title="标签名称" badge="20" />
<van-sidebar-item title="标签名称" />
</van-sidebar>
```
@ -161,5 +161,5 @@ import type { SidebarProps, SidebarItemProps } from 'vant';
| --van-sidebar-selected-text-color | _var(--van-text-color)_ | - |
| --van-sidebar-selected-border-width | _4px_ | - |
| --van-sidebar-selected-border-height | _16px_ | - |
| --van-sidebar-selected-border-color | _var(--van-danger-color)_ | - |
| --van-sidebar-selected-border-color | _var(--van-primary-color)_ | - |
| --van-sidebar-selected-background | _var(--van-background-light)_ | - |

View File

@ -45,7 +45,7 @@ const onChange = (index: number) => Toast(`${t('title')} ${index + 1}`);
<van-sidebar v-model="active2">
<van-sidebar-item :title="t('title')" dot />
<van-sidebar-item :title="t('title')" badge="5" />
<van-sidebar-item :title="t('title')" badge="20" />
<van-sidebar-item :title="t('title')" />
</van-sidebar>
</van-grid-item>

View File

@ -92,7 +92,7 @@ export default {
### Custom button
```html
<van-slider v-model="value" active-color="#ee0a24">
<van-slider v-model="value">
<template #button>
<div class="custom-button">{{ value }}</div>
</template>
@ -105,7 +105,7 @@ export default {
font-size: 10px;
line-height: 18px;
text-align: center;
background-color: #ee0a24;
background-color: var(--van-primary-color);
border-radius: 100px;
}
</style>

View File

@ -92,7 +92,7 @@ export default {
### 自定义按钮
```html
<van-slider v-model="value" active-color="#ee0a24">
<van-slider v-model="value">
<template #button>
<div class="custom-button">{{ value }}</div>
</template>
@ -105,7 +105,7 @@ export default {
font-size: 10px;
line-height: 18px;
text-align: center;
background-color: #ee0a24;
background-color: var(--van-primary-color);
border-radius: 100px;
}
</style>

View File

@ -30,14 +30,14 @@ const t = useTranslate({
});
const value1 = ref(50);
const value2 = ref([20, 60]);
const value2 = ref<[number, number]>([20, 60]);
const value3 = ref(0);
const value4 = ref(50);
const value5 = ref(50);
const value6 = ref(50);
const value7 = ref(50);
const value8 = ref(50);
const value9 = ref([20, 60]);
const value9 = ref<[number, number]>([20, 60]);
const onChange = (value: string) => Toast(t('text') + value);
</script>
@ -73,7 +73,7 @@ const onChange = (value: string) => Toast(t('text') + value);
</demo-block>
<demo-block :title="t('customButton')">
<van-slider v-model="value7" active-color="#ee0a24">
<van-slider v-model="value7">
<template #button>
<div class="custom-button">{{ value7 }}</div>
</template>
@ -113,7 +113,7 @@ const onChange = (value: string) => Toast(t('text') + value);
font-size: 10px;
line-height: 18px;
text-align: center;
background-color: var(--van-red);
background-color: var(--van-primary-color);
border-radius: 100px;
}
}