feat: switch support cssvar
parent
68a3f08a07
commit
89ffb0ec44
|
@ -19,7 +19,8 @@ The most basic usage.
|
||||||
<template>
|
<template>
|
||||||
<a-switch v-model:checked="checked" />
|
<a-switch v-model:checked="checked" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
const checked = ref<boolean>(false);
|
const checked = ref<boolean>(true);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -27,6 +27,6 @@ title:
|
||||||
import { reactive } from 'vue';
|
import { reactive } from 'vue';
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
checked1: true,
|
checked1: true,
|
||||||
checked2: false,
|
checked2: true,
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -18,7 +18,7 @@ With text and icon.
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<a-space direction="vertical">
|
<a-space direction="vertical">
|
||||||
<a-switch v-model:checked="state.checked1" checked-children="开" un-checked-children="关" />
|
<a-switch v-model:checked="state.checked1" checked-children="开启" un-checked-children="关闭" />
|
||||||
<a-switch v-model:checked="state.checked2" checked-children="1" un-checked-children="0" />
|
<a-switch v-model:checked="state.checked2" checked-children="1" un-checked-children="0" />
|
||||||
<a-switch v-model:checked="state.checked3">
|
<a-switch v-model:checked="state.checked3">
|
||||||
<template #checkedChildren><check-outlined /></template>
|
<template #checkedChildren><check-outlined /></template>
|
||||||
|
@ -32,6 +32,6 @@ import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
checked1: true,
|
checked1: true,
|
||||||
checked2: false,
|
checked2: false,
|
||||||
checked3: false,
|
checked3: true,
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -10,22 +10,22 @@ export interface ComponentToken {
|
||||||
* @desc 开关高度
|
* @desc 开关高度
|
||||||
* @descEN Height of Switch
|
* @descEN Height of Switch
|
||||||
*/
|
*/
|
||||||
trackHeight: number;
|
trackHeight: number | string;
|
||||||
/**
|
/**
|
||||||
* @desc 小号开关高度
|
* @desc 小号开关高度
|
||||||
* @descEN Height of small Switch
|
* @descEN Height of small Switch
|
||||||
*/
|
*/
|
||||||
trackHeightSM: number;
|
trackHeightSM: number | string;
|
||||||
/**
|
/**
|
||||||
* @desc 开关最小宽度
|
* @desc 开关最小宽度
|
||||||
* @descEN Minimum width of Switch
|
* @descEN Minimum width of Switch
|
||||||
*/
|
*/
|
||||||
trackMinWidth: number;
|
trackMinWidth: number | string;
|
||||||
/**
|
/**
|
||||||
* @desc 小号开关最小宽度
|
* @desc 小号开关最小宽度
|
||||||
* @descEN Minimum width of small Switch
|
* @descEN Minimum width of small Switch
|
||||||
*/
|
*/
|
||||||
trackMinWidthSM: number;
|
trackMinWidthSM: number | string;
|
||||||
/**
|
/**
|
||||||
* @desc 开关内边距
|
* @desc 开关内边距
|
||||||
* @descEN Padding of Switch
|
* @descEN Padding of Switch
|
||||||
|
@ -108,6 +108,11 @@ const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
||||||
[`${componentCls}-inner`]: {
|
[`${componentCls}-inner`]: {
|
||||||
paddingInlineStart: innerMaxMarginSM,
|
paddingInlineStart: innerMaxMarginSM,
|
||||||
paddingInlineEnd: innerMinMarginSM,
|
paddingInlineEnd: innerMinMarginSM,
|
||||||
|
|
||||||
|
[`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: {
|
||||||
|
minHeight: trackHeightSM,
|
||||||
|
},
|
||||||
|
|
||||||
[`${switchInnerCls}-checked`]: {
|
[`${switchInnerCls}-checked`]: {
|
||||||
marginInlineStart: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`,
|
marginInlineStart: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`,
|
||||||
marginInlineEnd: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`,
|
marginInlineEnd: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`,
|
||||||
|
@ -268,6 +273,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
||||||
fontSize: token.fontSizeSM,
|
fontSize: token.fontSizeSM,
|
||||||
transition: `margin-inline-start ${token.switchDuration} ease-in-out, margin-inline-end ${token.switchDuration} ease-in-out`,
|
transition: `margin-inline-start ${token.switchDuration} ease-in-out, margin-inline-end ${token.switchDuration} ease-in-out`,
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
|
minHeight: trackHeight,
|
||||||
},
|
},
|
||||||
|
|
||||||
[`${switchInnerCls}-checked`]: {
|
[`${switchInnerCls}-checked`]: {
|
||||||
|
@ -327,7 +333,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
|
||||||
boxSizing: 'border-box',
|
boxSizing: 'border-box',
|
||||||
minWidth: trackMinWidth,
|
minWidth: trackMinWidth,
|
||||||
height: trackHeight,
|
height: trackHeight,
|
||||||
lineHeight: `${unit(trackHeight)}`,
|
lineHeight: unit(trackHeight),
|
||||||
verticalAlign: 'middle',
|
verticalAlign: 'middle',
|
||||||
background: token.colorTextQuaternary,
|
background: token.colorTextQuaternary,
|
||||||
border: '0',
|
border: '0',
|
||||||
|
@ -365,7 +371,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
|
||||||
direction: 'rtl',
|
direction: 'rtl',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
} as CSSObject;
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
// ============================== Export ==============================
|
// ============================== Export ==============================
|
||||||
|
|
Loading…
Reference in New Issue