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

style(Sidebar): using primary color by default

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/sidebar-item/index.less
View File

@ -10,7 +10,7 @@
--van-sidebar-selected-text-color: var(--van-text-color); --van-sidebar-selected-text-color: var(--van-text-color);
--van-sidebar-selected-border-width: 4px; --van-sidebar-selected-border-width: 4px;
--van-sidebar-selected-border-height: 16px; --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); --van-sidebar-selected-background: var(--van-background-light);
} }

4
packages/vant/src/sidebar/README.md
View File

@ -46,7 +46,7 @@ export default {
<van-sidebar v-model="active"> <van-sidebar v-model="active">
<van-sidebar-item title="Title" dot /> <van-sidebar-item title="Title" dot />
<van-sidebar-item title="Title" badge="5" /> <van-sidebar-item title="Title" badge="5" />
<van-sidebar-item title="Title" badge="20" /> <van-sidebar-item title="Title" />
</van-sidebar> </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-text-color | _var(--van-text-color)_ | - |
| --van-sidebar-selected-border-width | _4px_ | - | | --van-sidebar-selected-border-width | _4px_ | - |
| --van-sidebar-selected-border-height | _16px_ | - | | --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)_ | - | | --van-sidebar-selected-background | _var(--van-background-light)_ | - |

4
packages/vant/src/sidebar/README.zh-CN.md
View File

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

2
packages/vant/src/sidebar/demo/index.vue
View File

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

4
packages/vant/src/slider/README.md
View File

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

4
packages/vant/src/slider/README.zh-CN.md
View File

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

8
packages/vant/src/slider/demo/index.vue
View File

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