mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-23 11:59:34 +08:00
feat(components): [switch] add size (#7377)
Co-authored-by: hezhaoshun <hezhaoshun@cmcm.com>
This commit is contained in:
joson
GitHub
parent
2003c345cf
commit
9aa6cc1912
@ -87,7 +87,7 @@ switch/prevent-switching
|
||||
| disabled | whether Switch is disabled | boolean | — | false |
|
||||
| loading | whether Switch is in loading state | boolean | — | false |
|
||||
| size | size of Switch | string | large / default / small | default |
|
||||
| width | width of Switch | number | — | 40 |
|
||||
| width | width of Switch | number / string | — | — |
|
||||
| inline-prompt | whether icon or text is displayed inside dot, only the first character will be rendered for text | boolean | — | false |
|
||||
| active-icon | component of the icon displayed when in `on` state, overrides `active-text` | string / Component | — | — |
|
||||
| inactive-icon | component of the icon displayed when in `off` state, overrides `inactive-text` | string / Component | — | — |
|
||||
|
||||
@ -30,8 +30,8 @@ export const switchProps = buildProps({
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
inlinePrompt: {
|
||||
type: Boolean,
|
||||
|
||||
@ -31,11 +31,7 @@
|
||||
inactiveText
|
||||
}}</span>
|
||||
</span>
|
||||
<span
|
||||
ref="core"
|
||||
:class="ns.e('core')"
|
||||
:style="{ width: (width || 40) + 'px' }"
|
||||
>
|
||||
<span ref="core" :class="ns.e('core')" :style="coreStyle">
|
||||
<div v-if="inlinePrompt" :class="ns.e('inner')">
|
||||
<template v-if="activeIcon || inactiveIcon">
|
||||
<el-icon
|
||||
@ -91,7 +87,7 @@
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'
|
||||
import { isPromise } from '@vue/shared'
|
||||
import { debugWarn, isBoolean, throwError } from '@element-plus/utils'
|
||||
import { addUnit, debugWarn, isBoolean, throwError } from '@element-plus/utils'
|
||||
import ElIcon from '@element-plus/components/icon'
|
||||
import { Loading } from '@element-plus/icons-vue'
|
||||
import {
|
||||
@ -107,6 +103,8 @@ import {
|
||||
} from '@element-plus/hooks'
|
||||
import { switchEmits, switchProps } from './switch'
|
||||
|
||||
import type { CSSProperties } from 'vue'
|
||||
|
||||
const COMPONENT_NAME = 'ElSwitch'
|
||||
|
||||
export default defineComponent({
|
||||
@ -133,6 +131,10 @@ export default defineComponent({
|
||||
ns.is('checked', checked.value),
|
||||
])
|
||||
|
||||
const coreStyle = computed<CSSProperties>(() => ({
|
||||
width: addUnit(props.width),
|
||||
}))
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
@ -246,6 +248,7 @@ export default defineComponent({
|
||||
switchDisabled,
|
||||
checked,
|
||||
switchKls,
|
||||
coreStyle,
|
||||
handleChange,
|
||||
switchValue,
|
||||
focus,
|
||||
|
||||
@ -720,10 +720,6 @@ $switch: map.merge(
|
||||
(
|
||||
'on-color': getCssVar('color-primary'),
|
||||
'off-color': getCssVar('border-color'),
|
||||
'core-border-radius': 10px,
|
||||
'width': 40px,
|
||||
'height': 20px,
|
||||
'button-size': 16px,
|
||||
),
|
||||
$switch
|
||||
);
|
||||
|
||||
@ -24,6 +24,46 @@ $switch-font-size: map.merge(
|
||||
$switch-font-size
|
||||
);
|
||||
|
||||
$switch-core-border-radius: () !default;
|
||||
$switch-core-border-radius: map.merge(
|
||||
(
|
||||
'large': 12px,
|
||||
'default': 10px,
|
||||
'small': 8px,
|
||||
),
|
||||
$switch-core-border-radius
|
||||
);
|
||||
|
||||
$switch-core-width: () !default;
|
||||
$switch-core-width: map.merge(
|
||||
(
|
||||
'large': 50px,
|
||||
'default': 40px,
|
||||
'small': 30px,
|
||||
),
|
||||
$switch-core-width
|
||||
);
|
||||
|
||||
$switch-core-height: () !default;
|
||||
$switch-core-height: map.merge(
|
||||
(
|
||||
'large': 24px,
|
||||
'default': 20px,
|
||||
'small': 16px,
|
||||
),
|
||||
$switch-core-height
|
||||
);
|
||||
|
||||
$switch-button-size: () !default;
|
||||
$switch-button-size: map.merge(
|
||||
(
|
||||
'large': 20px,
|
||||
'default': 16px,
|
||||
'small': 12px,
|
||||
),
|
||||
$switch-button-size
|
||||
);
|
||||
|
||||
@include b(switch) {
|
||||
@include set-component-css-var('switch', $switch);
|
||||
}
|
||||
@ -33,7 +73,7 @@ $switch-font-size: map.merge(
|
||||
align-items: center;
|
||||
position: relative;
|
||||
font-size: map.get($switch-font-size, 'default');
|
||||
line-height: getCssVar('switch-height');
|
||||
line-height: map.get($switch-core-height, 'default');
|
||||
height: map.get($switch-height, 'default');
|
||||
vertical-align: middle;
|
||||
@include when(disabled) {
|
||||
@ -45,7 +85,7 @@ $switch-font-size: map.merge(
|
||||
|
||||
@include e(label) {
|
||||
transition: getCssVar('transition-duration-fast');
|
||||
height: getCssVar('switch-height');
|
||||
height: map.get($switch-core-height, 'default');
|
||||
display: inline-block;
|
||||
font-size: map.get($switch-font-size, 'default');
|
||||
font-weight: 500;
|
||||
@ -89,11 +129,11 @@ $switch-font-size: map.merge(
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: getCssVar('switch-width');
|
||||
height: getCssVar('switch-height');
|
||||
width: map.get($switch-core-width, 'default');
|
||||
height: map.get($switch-core-height, 'default');
|
||||
border: 1px solid getCssVar('switch-off-color');
|
||||
outline: none;
|
||||
border-radius: getCssVar('switch-core-border-radius');
|
||||
border-radius: map.get($switch-core-border-radius, 'default');
|
||||
box-sizing: border-box;
|
||||
background: getCssVar('switch-off-color');
|
||||
cursor: pointer;
|
||||
@ -106,8 +146,8 @@ $switch-font-size: map.merge(
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
transition: all getCssVar('transition-duration');
|
||||
width: getCssVar('switch-button-size');
|
||||
height: getCssVar('switch-button-size');
|
||||
width: map.get($switch-button-size, 'default');
|
||||
height: map.get($switch-button-size, 'default');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -129,8 +169,8 @@ $switch-font-size: map.merge(
|
||||
left: 1px;
|
||||
border-radius: getCssVar('border-radius-circle');
|
||||
transition: all getCssVar('transition-duration');
|
||||
width: getCssVar('switch-button-size');
|
||||
height: getCssVar('switch-button-size');
|
||||
width: map.get($switch-button-size, 'default');
|
||||
height: map.get($switch-button-size, 'default');
|
||||
background-color: getCssVar('color-white');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -165,14 +205,14 @@ $switch-font-size: map.merge(
|
||||
|
||||
.#{$namespace}-switch__action {
|
||||
left: 100%;
|
||||
margin-left: calc(-1px - getCssVar('switch-button-size'));
|
||||
margin-left: calc(-1px - #{map.get($switch-button-size, 'default')});
|
||||
color: getCssVar('switch-on-color');
|
||||
}
|
||||
|
||||
.#{$namespace}-switch__inner {
|
||||
left: 50%;
|
||||
white-space: nowrap;
|
||||
margin-left: calc(-1px - getCssVar('switch-button-size'));
|
||||
margin-left: calc(-1px - #{map.get($switch-button-size, 'default')});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -205,15 +245,45 @@ $switch-font-size: map.merge(
|
||||
@each $size in (large, small) {
|
||||
@include m($size) {
|
||||
font-size: map.get($switch-font-size, $size);
|
||||
line-height: map.get($switch-core-height, $size);
|
||||
height: map.get($switch-height, $size);
|
||||
|
||||
@include e(label) {
|
||||
height: map.get($switch-core-height, $size);
|
||||
font-size: map.get($switch-font-size, $size);
|
||||
|
||||
& * {
|
||||
font-size: map.get($switch-font-size, $size);
|
||||
}
|
||||
}
|
||||
|
||||
@include e(core) {
|
||||
width: map.get($switch-core-width, $size);
|
||||
height: map.get($switch-core-height, $size);
|
||||
border-radius: map.get($switch-core-border-radius, $size);
|
||||
|
||||
.#{$namespace}-switch__inner {
|
||||
width: map.get($switch-button-size, $size);
|
||||
height: map.get($switch-button-size, $size);
|
||||
}
|
||||
|
||||
.#{$namespace}-switch__action {
|
||||
width: map.get($switch-button-size, $size);
|
||||
height: map.get($switch-button-size, $size);
|
||||
}
|
||||
}
|
||||
|
||||
@include when(checked) {
|
||||
.#{$namespace}-switch__core {
|
||||
.#{$namespace}-switch__action {
|
||||
margin-left: calc(-1px - #{map.get($switch-button-size, $size)});
|
||||
}
|
||||
|
||||
.#{$namespace}-switch__inner {
|
||||
margin-left: calc(-1px - #{map.get($switch-button-size, $size)});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user