mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +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">
|
||||
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,41 +47,35 @@ 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>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-form>
|
||||
<van-field name="rate" :label="t('rate')">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="slider" :label="t('slider')">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="slider" :label="t('slider')">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<div style="margin: 16px">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</van-config-provider>
|
||||
<div style="margin: 16px">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</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>
|
||||
|
||||
@ -3,122 +3,112 @@
|
||||
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">
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Rate
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div role="radiogroup"
|
||||
class="van-rate"
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Rate
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div role="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="false"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="false"
|
||||
aria-setsize="5"
|
||||
aria-posinset="1"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="1"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="2"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="3"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="4"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
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>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="2"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="3"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="4"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
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 class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Slider
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar"
|
||||
style="width: 50%; left: 0%;"
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Slider
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-slider">
|
||||
<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"
|
||||
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 class="van-slider__button">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -126,19 +116,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px;">
|
||||
<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">
|
||||
Submit
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px;">
|
||||
<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">
|
||||
Submit
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-config-provider"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user