mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-25 10:56:35 +08:00
docs(ConfigProvider): optimize theme demo (#11725)
This commit is contained in:
neverland
GitHub
parent
28885fdee5
commit
53260297bd
@ -1,10 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from 'vue';
|
import { ref } from 'vue';
|
||||||
import VanCell from '../../cell';
|
import VanCell from '../../cell';
|
||||||
import VanForm from '../../form';
|
import VanForm from '../../form';
|
||||||
import VanField from '../../field';
|
import VanField from '../../field';
|
||||||
import VanRate from '../../rate';
|
import VanRate from '../../rate';
|
||||||
import VanSwitch from '../../switch';
|
|
||||||
import VanSlider from '../../slider';
|
import VanSlider from '../../slider';
|
||||||
import VanButton from '../../button';
|
import VanButton from '../../button';
|
||||||
import VanConfigProvider from '..';
|
import VanConfigProvider from '..';
|
||||||
@ -19,7 +18,7 @@ const t = useTranslate({
|
|||||||
customTheme: '定制主题',
|
customTheme: '定制主题',
|
||||||
defaultTheme: '默认主题',
|
defaultTheme: '默认主题',
|
||||||
darkMode: '深色模式',
|
darkMode: '深色模式',
|
||||||
switchDarkMode: '切换深色模式',
|
switchDarkMode: '请点击文档右上角的按钮，切换深浅模式。',
|
||||||
},
|
},
|
||||||
'en-US': {
|
'en-US': {
|
||||||
rate: 'Rate',
|
rate: 'Rate',
|
||||||
@ -29,12 +28,11 @@ const t = useTranslate({
|
|||||||
customTheme: 'Custom Theme',
|
customTheme: 'Custom Theme',
|
||||||
defaultTheme: 'DefaultTheme',
|
defaultTheme: 'DefaultTheme',
|
||||||
darkMode: 'Dark Mode',
|
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 rate = ref(4);
|
||||||
const slider = ref(50);
|
const slider = ref(50);
|
||||||
const themeVars = {
|
const themeVars = {
|
||||||
@ -49,41 +47,35 @@ const themeVars = {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :style="{ background: darkMode ? 'black' : '', minHeight: '100vh' }">
|
<div :style="{ minHeight: '100vh' }">
|
||||||
<demo-block :title="t('darkMode')">
|
<demo-block :title="t('darkMode')">
|
||||||
<van-cell center :title="t('switchDarkMode')">
|
<van-cell :title="t('switchDarkMode')" />
|
||||||
<template #right-icon>
|
|
||||||
<van-switch v-model="darkMode" />
|
|
||||||
</template>
|
|
||||||
</van-cell>
|
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block :title="t('defaultTheme')">
|
<demo-block :title="t('defaultTheme')">
|
||||||
<van-config-provider :theme="theme">
|
<van-form>
|
||||||
<van-form>
|
<van-field name="rate" :label="t('rate')">
|
||||||
<van-field name="rate" :label="t('rate')">
|
<template #input>
|
||||||
<template #input>
|
<van-rate v-model="rate" />
|
||||||
<van-rate v-model="rate" />
|
</template>
|
||||||
</template>
|
</van-field>
|
||||||
</van-field>
|
|
||||||
|
|
||||||
<van-field name="slider" :label="t('slider')">
|
<van-field name="slider" :label="t('slider')">
|
||||||
<template #input>
|
<template #input>
|
||||||
<van-slider v-model="slider" />
|
<van-slider v-model="slider" />
|
||||||
</template>
|
</template>
|
||||||
</van-field>
|
</van-field>
|
||||||
|
|
||||||
<div style="margin: 16px">
|
<div style="margin: 16px">
|
||||||
<van-button round block type="primary" native-type="submit">
|
<van-button round block type="primary" native-type="submit">
|
||||||
{{ t('submit') }}
|
{{ t('submit') }}
|
||||||
</van-button>
|
</van-button>
|
||||||
</div>
|
</div>
|
||||||
</van-form>
|
</van-form>
|
||||||
</van-config-provider>
|
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block :title="t('customTheme')">
|
<demo-block :title="t('customTheme')">
|
||||||
<van-config-provider :theme="theme" :theme-vars="themeVars">
|
<van-config-provider :theme-vars="themeVars">
|
||||||
<van-form>
|
<van-form>
|
||||||
<van-field name="rate" :label="t('rate')">
|
<van-field name="rate" :label="t('rate')">
|
||||||
<template #input>
|
<template #input>
|
||||||
|
|||||||
@ -3,122 +3,112 @@
|
|||||||
exports[`should render demo and match snapshot 1`] = `
|
exports[`should render demo and match snapshot 1`] = `
|
||||||
<div style="min-height: 100vh;">
|
<div style="min-height: 100vh;">
|
||||||
<div>
|
<div>
|
||||||
<div class="van-cell van-cell--center">
|
<div class="van-cell">
|
||||||
<div class="van-cell__title">
|
<div class="van-cell__title">
|
||||||
<span>
|
<span>
|
||||||
Switch Dark Mode
|
Please click the button in the upper right corner to switch between dark and light modes.
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div role="switch"
|
|
||||||
class="van-switch"
|
|
||||||
tabindex="0"
|
|
||||||
aria-checked="false"
|
|
||||||
>
|
|
||||||
<div class="van-switch__node">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="van-config-provider">
|
<form class="van-form">
|
||||||
<form class="van-form">
|
<div class="van-cell van-field">
|
||||||
<div class="van-cell van-field">
|
<div class="van-cell__title van-field__label">
|
||||||
<div class="van-cell__title van-field__label">
|
<label id="van-field-label"
|
||||||
<label id="van-field-label"
|
for="van-field-input"
|
||||||
for="van-field-input"
|
>
|
||||||
>
|
Rate
|
||||||
Rate
|
</label>
|
||||||
</label>
|
</div>
|
||||||
</div>
|
<div class="van-cell__value van-field__value">
|
||||||
<div class="van-cell__value van-field__value">
|
<div class="van-field__body">
|
||||||
<div class="van-field__body">
|
<div class="van-field__control van-field__control--custom">
|
||||||
<div class="van-field__control van-field__control--custom">
|
<div role="radiogroup"
|
||||||
<div role="radiogroup"
|
class="van-rate"
|
||||||
class="van-rate"
|
tabindex="0"
|
||||||
|
aria-disabled="false"
|
||||||
|
aria-readonly="false"
|
||||||
|
>
|
||||||
|
<div role="radio"
|
||||||
|
class="van-rate__item"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
aria-disabled="false"
|
aria-setsize="5"
|
||||||
aria-readonly="false"
|
aria-posinset="1"
|
||||||
|
aria-checked="true"
|
||||||
>
|
>
|
||||||
<div role="radio"
|
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||||
class="van-rate__item"
|
</i>
|
||||||
tabindex="0"
|
</div>
|
||||||
aria-setsize="5"
|
<div role="radio"
|
||||||
aria-posinset="1"
|
class="van-rate__item"
|
||||||
aria-checked="true"
|
tabindex="0"
|
||||||
>
|
aria-setsize="5"
|
||||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
aria-posinset="2"
|
||||||
</i>
|
aria-checked="true"
|
||||||
</div>
|
>
|
||||||
<div role="radio"
|
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||||
class="van-rate__item"
|
</i>
|
||||||
tabindex="0"
|
</div>
|
||||||
aria-setsize="5"
|
<div role="radio"
|
||||||
aria-posinset="2"
|
class="van-rate__item"
|
||||||
aria-checked="true"
|
tabindex="0"
|
||||||
>
|
aria-setsize="5"
|
||||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
aria-posinset="3"
|
||||||
</i>
|
aria-checked="true"
|
||||||
</div>
|
>
|
||||||
<div role="radio"
|
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||||
class="van-rate__item"
|
</i>
|
||||||
tabindex="0"
|
</div>
|
||||||
aria-setsize="5"
|
<div role="radio"
|
||||||
aria-posinset="3"
|
class="van-rate__item"
|
||||||
aria-checked="true"
|
tabindex="0"
|
||||||
>
|
aria-setsize="5"
|
||||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
aria-posinset="4"
|
||||||
</i>
|
aria-checked="true"
|
||||||
</div>
|
>
|
||||||
<div role="radio"
|
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||||
class="van-rate__item"
|
</i>
|
||||||
tabindex="0"
|
</div>
|
||||||
aria-setsize="5"
|
<div role="radio"
|
||||||
aria-posinset="4"
|
class="van-rate__item"
|
||||||
aria-checked="true"
|
tabindex="0"
|
||||||
>
|
aria-setsize="5"
|
||||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
aria-posinset="5"
|
||||||
</i>
|
aria-checked="false"
|
||||||
</div>
|
>
|
||||||
<div role="radio"
|
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
|
||||||
class="van-rate__item"
|
</i>
|
||||||
tabindex="0"
|
|
||||||
aria-setsize="5"
|
|
||||||
aria-posinset="5"
|
|
||||||
aria-checked="false"
|
|
||||||
>
|
|
||||||
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
|
|
||||||
</i>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-field">
|
</div>
|
||||||
<div class="van-cell__title van-field__label">
|
<div class="van-cell van-field">
|
||||||
<label id="van-field-label"
|
<div class="van-cell__title van-field__label">
|
||||||
for="van-field-input"
|
<label id="van-field-label"
|
||||||
>
|
for="van-field-input"
|
||||||
Slider
|
>
|
||||||
</label>
|
Slider
|
||||||
</div>
|
</label>
|
||||||
<div class="van-cell__value van-field__value">
|
</div>
|
||||||
<div class="van-field__body">
|
<div class="van-cell__value van-field__value">
|
||||||
<div class="van-field__control van-field__control--custom">
|
<div class="van-field__body">
|
||||||
<div class="van-slider">
|
<div class="van-field__control van-field__control--custom">
|
||||||
<div class="van-slider__bar"
|
<div class="van-slider">
|
||||||
style="width: 50%; left: 0%;"
|
<div class="van-slider__bar"
|
||||||
|
style="width: 50%; left: 0%;"
|
||||||
|
>
|
||||||
|
<div role="slider"
|
||||||
|
class="van-slider__button-wrapper van-slider__button-wrapper--right"
|
||||||
|
tabindex="0"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuenow="50"
|
||||||
|
aria-valuemax="100"
|
||||||
|
aria-orientation="horizontal"
|
||||||
>
|
>
|
||||||
<div role="slider"
|
<div class="van-slider__button">
|
||||||
class="van-slider__button-wrapper van-slider__button-wrapper--right"
|
|
||||||
tabindex="0"
|
|
||||||
aria-valuemin="0"
|
|
||||||
aria-valuenow="50"
|
|
||||||
aria-valuemax="100"
|
|
||||||
aria-orientation="horizontal"
|
|
||||||
>
|
|
||||||
<div class="van-slider__button">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -126,19 +116,19 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin: 16px;">
|
</div>
|
||||||
<button type="submit"
|
<div style="margin: 16px;">
|
||||||
class="van-button van-button--primary van-button--normal van-button--block van-button--round"
|
<button type="submit"
|
||||||
>
|
class="van-button van-button--primary van-button--normal van-button--block van-button--round"
|
||||||
<div class="van-button__content">
|
>
|
||||||
<span class="van-button__text">
|
<div class="van-button__content">
|
||||||
Submit
|
<span class="van-button__text">
|
||||||
</span>
|
Submit
|
||||||
</div>
|
</span>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</button>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="van-config-provider"
|
<div class="van-config-provider"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user