blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-25 02:41:46 +08:00
Code Issues Projects Releases Wiki Activity

docs(ConfigProvider): optimize theme demo (#11725)

Browse Source
This commit is contained in:
neverland 2023-04-01 20:40:29 +08:00 committed by GitHub
parent 28885fdee5
commit 53260297bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 128 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/vant/src/config-provider/demo/index.vue
View File

@ -1,10 +1,9 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { ref } from 'vue';
import VanCell from '../../cell';
import VanForm from '../../form';
import VanField from '../../field';
import VanRate from '../../rate';
import VanSwitch from '../../switch';
import VanSlider from '../../slider';
import VanButton from '../../button';
import VanConfigProvider from '..';
@ -19,7 +18,7 @@ const t = useTranslate({
customTheme: '定制主题',
defaultTheme: '默认主题',
darkMode: '深色模式',
switchDarkMode: '切换深色模式',
switchDarkMode: '请点击文档右上角的按钮，切换深浅模式。',
},
'en-US': {
rate: 'Rate',
@ -29,12 +28,11 @@ const t = useTranslate({
customTheme: 'Custom Theme',
defaultTheme: 'DefaultTheme',
darkMode: 'Dark Mode',
switchDarkMode: 'Switch Dark Mode',
switchDarkMode:
'Please click the button in the upper right corner to switch between dark and light modes.',
},
});
const darkMode = ref(false);
const theme = computed(() => (darkMode.value ? 'dark' : 'light'));
const rate = ref(4);
const slider = ref(50);
const themeVars = {
@ -49,17 +47,12 @@ const themeVars = {
</script>
<template>
<div :style="{ background: darkMode ? 'black' : '', minHeight: '100vh' }">
<div :style="{ minHeight: '100vh' }">
<demo-block :title="t('darkMode')">
<van-cell center :title="t('switchDarkMode')">
<template #right-icon>
<van-switch v-model="darkMode" />
</template>
</van-cell>
<van-cell :title="t('switchDarkMode')" />
</demo-block>
<demo-block :title="t('defaultTheme')">
<van-config-provider :theme="theme">
<van-form>
<van-field name="rate" :label="t('rate')">
<template #input>
@ -79,11 +72,10 @@ const themeVars = {
</van-button>
</div>
</van-form>
</van-config-provider>
</demo-block>
<demo-block :title="t('customTheme')">
<van-config-provider :theme="theme" :theme-vars="themeVars">
<van-config-provider :theme-vars="themeVars">
<van-form>
<van-field name="rate" :label="t('rate')">
<template #input>

14
packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap
View File

@ -3,24 +3,15 @@
exports[`should render demo and match snapshot 1`] = `
<div style="min-height: 100vh;">
<div>
<div class="van-cell van-cell--center">
<div class="van-cell">
<div class="van-cell__title">
<span>
Switch Dark Mode
Please click the button in the upper right corner to switch between dark and light modes.
</span>
</div>
<div role="switch"
class="van-switch"
tabindex="0"
aria-checked="false"
>
<div class="van-switch__node">
</div>
</div>
</div>
</div>
<div>
<div class="van-config-provider">
<form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
@ -139,7 +130,6 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</form>
</div>
</div>
<div>
<div class="van-config-provider"
style="--van-rate-icon-full-color: #07c160; --van-slider-bar-height: 4px; --van-slider-button-width: 20px; --van-slider-button-height: 20px; --van-slider-active-background: #07c160; --van-button-primary-background: #07c160; --van-button-primary-border-color: #07c160;"