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(Switch): adjust style

Browse Source
This commit is contained in:
chenjiahan 2022-02-17 15:31:52 +08:00
parent b3cf1dfb54
commit 2acd47b5ee
20 changed files with 60 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/vant/docs/markdown/changelog-v4.zh-CN.md
View File

@ -34,5 +34,8 @@
- Card: 调整 `--van-card-price-color` 变量的默认值为 `--van-text-color`
- Card: 调整 `--van-card-desc-color` 变量的默认值为 `--van-text-color-2`
- Field: 调整 `--van-field-label-color` 变量的默认值为 `--van-text-color`
- Switch: 移除 `--van-switch-border` 变量
- Switch: 调整 `--van-switch-size` 变量的默认值为 `26px`
- Switch: 调整 `--van-switch-background` 变量的默认值为 `rgba(120, 120, 128, 0.16)`
- Tabbar: 调整 `--van-tabbar-item-text-color` 变量的默认值为 `--van-text-color`
- GridItem: 调整 `--van-grid-item-text-color` 变量的默认值为 `--van-text-color`

1
packages/vant/src/address-edit/AddressEdit.tsx
View File

@ -227,7 +227,6 @@ export default defineComponent({
'right-icon': () => (
<Switch
v-model={data.isDefault}
size="24"
onChange={(event) => emit('changeDefault', event)}
/>
),

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

@ -53,7 +53,7 @@ const themeVars = {
<demo-block :title="t('darkMode')">
<van-cell center :title="t('switchDarkMode')">
<template #right-icon>
<van-switch v-model="darkMode" size="24" />
<van-switch v-model="darkMode" />
</template>
</van-cell>
</demo-block>

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

@ -11,7 +11,6 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="switch"
class="van-switch"
style="font-size: 24px;"
tabindex="0"
aria-checked="false"
>

1
packages/vant/src/contact-edit/ContactEdit.tsx
View File

@ -92,7 +92,6 @@ export default defineComponent({
const renderSwitch = () => (
<Switch
v-model={contact.isDefault}
size={24}
onChange={(checked: boolean) => emit('changeDefault', checked)}
/>
);

1
packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap
View File

@ -51,7 +51,6 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="switch"
class="van-switch"
style="font-size: 24px;"
tabindex="0"
aria-checked="false"
>

4
packages/vant/src/dropdown-menu/README.md
View File

@ -64,12 +64,12 @@ export default {
<van-dropdown-item title="Title" ref="item">
<van-cell center title="Title">
<template #right-icon>
<van-switch v-model="switch1" size="24" />
<van-switch v-model="switch1" />
</template>
</van-cell>
<van-cell center title="Title">
<template #right-icon>
<van-switch v-model="switch2" size="24" />
<van-switch v-model="switch2" />
</template>
</van-cell>
<div style="padding: 5px 16px;">

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

@ -66,12 +66,12 @@ export default {
<van-dropdown-item title="筛选" ref="item">
<van-cell center title="包邮">
<template #right-icon>
<van-switch v-model="switch1" size="24" />
<van-switch v-model="switch1" />
</template>
</van-cell>
<van-cell center title="团购">
<template #right-icon>
<van-switch v-model="switch2" size="24" />
<van-switch v-model="switch2" />
</template>
</van-cell>
<div style="padding: 5px 16px;">

4
packages/vant/src/dropdown-menu/demo/index.vue
View File

@ -78,12 +78,12 @@ const onConfirm = () => {
<van-dropdown-item :title="t('itemTitle')" ref="item">
<van-cell center :title="t('switchTitle1')">
<template #right-icon>
<van-switch v-model="switch1" size="24" />
<van-switch v-model="switch1" />
</template>
</van-cell>
<van-cell center :title="t('switchTitle2')">
<template #right-icon>
<van-switch v-model="switch2" size="24" />
<van-switch v-model="switch2" />
</template>
</van-cell>
<div style="padding: 5px 16px">

2
packages/vant/src/form/README.md
View File

@ -157,7 +157,7 @@ export default {
```html
<van-field name="switch" label="Switch">
<template #input>
<van-switch v-model="checked" size="20" />
<van-switch v-model="checked" />
</template>
</van-field>
```

2
packages/vant/src/form/README.zh-CN.md
View File

@ -169,7 +169,7 @@ export default {
```html
<van-field name="switch" label="开关">
<template #input>
<van-switch v-model="checked" size="20" />
<van-switch v-model="checked" />
</template>
</van-field>
```

2
packages/vant/src/form/demo/FieldType.vue
View File

@ -70,7 +70,7 @@ const onSubmit = (values: Record<string, string>) => {
<van-cell-group inset>
<van-field name="switch" :label="t('switch')">
<template #input>
<van-switch v-model="switchChecked" size="20" />
<van-switch v-model="switchChecked" />
</template>
</van-field>

1
packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
View File

@ -171,7 +171,6 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-field__control van-field__control--custom">
<div role="switch"
class="van-switch"
style="font-size: 20px;"
tabindex="0"
aria-checked="false"
>

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

@ -32,7 +32,7 @@ const show = ref(false);
</demo-block>
<demo-block :title="t('showChildren')">
<van-switch v-model="show" size="24px" />
<van-switch v-model="show" />
<van-skeleton title avatar :row="3" :loading="!show">
<div class="demo-preview">
<img src="https://img.yzcdn.cn/vant/logo.png" />

1
packages/vant/src/skeleton/test/__snapshots__/demo.spec.ts.snap
View File

@ -46,7 +46,6 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<div role="switch"
class="van-switch"
style="font-size: 24px;"
tabindex="0"
aria-checked="false"
>

17
packages/vant/src/switch/README.md
View File

@ -50,7 +50,7 @@ export default {
### Custom Size
```html
<van-switch v-model="checked" size="24px" />
<van-switch v-model="checked" size="22px" />
```
### Custom Color
@ -94,7 +94,7 @@ export default {
```html
<van-cell center title="Title">
<template #right-icon>
<van-switch v-model="checked" size="24" />
<van-switch v-model="checked" />
</template>
</van-cell>
```
@ -108,9 +108,9 @@ export default {
| v-model | Check status of Switch | _ActiveValue \| InactiveValue_ | `false` |
| loading | Whether to show loading icon | _boolean_ | `false` |
| disabled | Whether to disable switch | _boolean_ | `false` |
| size | Size of switch | _number \| string_ | `30px` |
| size | Size of switch button | _number \| string_ | `26px` |
| active-color | Background color when active | _string_ | `#1989fa` |
| inactive-color | Background color when inactive | _string_ | `white` |
| inactive-color | Background color when inactive | _string_ | `rgba(120, 120, 128, 0.16)` |
| active-value | Value when active | _any_ | `true` |
| inactive-value | Value when inactive | _any_ | `false` |
@ -137,14 +137,13 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-switch-size | _30px_ | - |
| --van-switch-width | _2em_ | - |
| --van-switch-height | _1em_ | - |
| --van-switch-size | _26px_ | - |
| --van-switch-width | _calc(2em + 4px)_ | - |
| --van-switch-height | _calc(1em + 4px)_ | - |
| --van-switch-node-size | _1em_ | - |
| --van-switch-node-background | _var(--van-white)_ | - |
| --van-switch-node-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - |
| --van-switch-background | _var(--van-background-2)_ | - |
| --van-switch-background | _rgba(120, 120, 128, 0.16)_ | - |
| --van-switch-on-background | _var(--van-primary-color)_ | - |
| --van-switch-duration | _var(--van-duration-base)_ | - |
| --van-switch-disabled-opacity | _var(--van-disabled-opacity)_ | - |
| --van-switch-border | _var(--van-border-width) solid rgba(0, 0, 0, 0.1)_ | - |

49
packages/vant/src/switch/README.zh-CN.md
View File

@ -58,7 +58,7 @@ export default {
通过 `size` 属性自定义开关的大小。
```html
<van-switch v-model="checked" size="24px" />
<van-switch v-model="checked" size="22px" />
```
### 自定义颜色
@ -106,7 +106,7 @@ export default {
```html
<van-cell center title="标题">
<template #right-icon>
<van-switch v-model="checked" size="24" />
<van-switch v-model="checked" />
</template>
</van-cell>
```
@ -115,16 +115,16 @@ export default {
### Props
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | ------------------------ | ------------------ | --------- |
| v-model | 开关选中状态 | _any_ | `false` |
| loading | 是否为加载状态 | _boolean_ | `false` |
| disabled | 是否为禁用状态 | _boolean_ | `false` |
| size | 开关尺寸，默认单位为`px` | _number \| string_ | `30px` |
| active-color | 打开时的背景色 | _string_ | `#1989fa` |
| inactive-color | 关闭时的背景色 | _string_ | `white` |
| active-value | 打开时对应的值 | _any_ | `true` |
| inactive-value | 关闭时对应的值 | _any_ | `false` |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 开关选中状态 | _any_ | `false` |
| loading | 是否为加载状态 | _boolean_ | `false` |
| disabled | 是否为禁用状态 | _boolean_ | `false` |
| size | 开关按钮的尺寸，默认单位为 `px` | _number \| string_ | `26px` |
| active-color | 打开时的背景色 | _string_ | `#1989fa` |
| inactive-color | 关闭时的背景色 | _string_ | `rgba(120, 120, 128, 0.16)` |
| active-value | 打开时对应的值 | _any_ | `true` |
| inactive-value | 关闭时对应的值 | _any_ | `false` |
### Events
@ -147,16 +147,15 @@ import type { SwitchProps } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-switch-size | _30px_ | - |
| --van-switch-width | _2em_ | - |
| --van-switch-height | _1em_ | - |
| --van-switch-node-size | _1em_ | - |
| --van-switch-node-background | _var(--van-white)_ | - |
| --van-switch-node-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - |
| --van-switch-background | _var(--van-background-2)_ | - |
| --van-switch-on-background | _var(--van-primary-color)_ | - |
| --van-switch-duration | _var(--van-duration-base)_ | - |
| --van-switch-disabled-opacity | _var(--van-disabled-opacity)_ | - |
| --van-switch-border | _var(--van-border-width) solid rgba(0, 0, 0, 0.1)_ | - |
| 名称 | 默认值 | 描述 |
| ----------------------------- | --------------------------------- | ---- |
| --van-switch-size | _26px_ | - |
| --van-switch-width | _calc(2em + 4px)_ | - |
| --van-switch-height | _calc(1em + 4px)_ | - |
| --van-switch-node-size | _1em_ | - |
| --van-switch-node-background | _var(--van-white)_ | - |
| --van-switch-node-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - |
| --van-switch-background | _rgba(120, 120, 128, 0.16)_ | - |
| --van-switch-on-background | _var(--van-primary-color)_ | - |
| --van-switch-duration | _var(--van-duration-base)_ | - |
| --van-switch-disabled-opacity | _var(--van-disabled-opacity)_ | - |

4
packages/vant/src/switch/demo/index.vue
View File

@ -56,7 +56,7 @@ const onUpdateValue = (checked: boolean) => {
</demo-block>
<demo-block :title="t('customSize')">
<van-switch v-model="checked2" size="24px" />
<van-switch v-model="checked2" size="22px" />
</demo-block>
<demo-block :title="t('customColor')">
@ -74,7 +74,7 @@ const onUpdateValue = (checked: boolean) => {
<demo-block :title="t('withCell')">
<van-cell center :title="t('title')">
<template #right-icon>
<van-switch v-model="checked5" size="24" />
<van-switch v-model="checked5" />
</template>
</van-cell>
</demo-block>

20
packages/vant/src/switch/index.less
View File

@ -1,15 +1,18 @@
body {
--van-switch-size: 30px;
--van-switch-width: 2em;
--van-switch-height: 1em;
--van-switch-size: 26px;
--van-switch-width: calc(2em + 4px);
--van-switch-height: calc(1em + 4px);
--van-switch-node-size: 1em;
--van-switch-node-background: var(--van-white);
--van-switch-node-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05);
--van-switch-background: var(--van-background-3);
--van-switch-background: rgba(120, 120, 128, 0.16);
--van-switch-on-background: var(--van-primary-color);
--van-switch-duration: var(--van-duration-base);
--van-switch-disabled-opacity: var(--van-disabled-opacity);
--van-switch-border: var(--van-border-width) solid rgba(0, 0, 0, 0.1);
}
.van-theme-dark {
--van-switch-background: rgba(120, 120, 128, 0.32);
}
.van-switch {
@ -20,15 +23,14 @@ body {
height: var(--van-switch-height);
font-size: var(--van-switch-size);
background: var(--van-switch-background);
border: var(--van-switch-border);
border-radius: var(--van-switch-node-size);
cursor: pointer;
transition: background-color var(--van-switch-duration);
&__node {
position: absolute;
top: 0;
left: 0;
top: 2px;
left: 2px;
width: var(--van-switch-node-size);
height: var(--van-switch-node-size);
// https://github.com/youzan/vant/issues/9839
@ -53,7 +55,7 @@ body {
.van-switch__node {
transform: translateX(
calc(var(--van-switch-width) - var(--van-switch-node-size))
calc(var(--van-switch-width) - var(--van-switch-node-size) - 4px)
);
}

3
packages/vant/src/switch/test/__snapshots__/demo.spec.ts.snap
View File

@ -47,7 +47,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<div role="switch"
class="van-switch van-switch--on"
style="font-size: 24px;"
style="font-size: 22px;"
tabindex="0"
aria-checked="true"
>
@ -85,7 +85,6 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div role="switch"
class="van-switch van-switch--on"
style="font-size: 24px;"
tabindex="0"
aria-checked="true"
>