mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
style(Sidebar): using primary color by default
This commit is contained in:
parent
8b95db1574
commit
eeb233bf99
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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)_ | - |
|
||||
|
@ -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)_ | - |
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user