diff --git a/components/switch/demo/basic.vue b/components/switch/demo/basic.vue
index af7d01376c..076d7b4ea1 100644
--- a/components/switch/demo/basic.vue
+++ b/components/switch/demo/basic.vue
@@ -19,7 +19,8 @@ The most basic usage.
+
diff --git a/components/switch/demo/size.vue b/components/switch/demo/size.vue
index 7bc9687582..145345d71b 100644
--- a/components/switch/demo/size.vue
+++ b/components/switch/demo/size.vue
@@ -27,6 +27,6 @@ title:
import { reactive } from 'vue';
const state = reactive({
checked1: true,
- checked2: false,
+ checked2: true,
});
diff --git a/components/switch/demo/text.vue b/components/switch/demo/text.vue
index e1e8a64504..5173471343 100644
--- a/components/switch/demo/text.vue
+++ b/components/switch/demo/text.vue
@@ -18,7 +18,7 @@ With text and icon.
-
+
@@ -32,6 +32,6 @@ import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
const state = reactive({
checked1: true,
checked2: false,
- checked3: false,
+ checked3: true,
});
diff --git a/components/switch/style/index.ts b/components/switch/style/index.ts
index b7919cede2..8cd768ea8f 100644
--- a/components/switch/style/index.ts
+++ b/components/switch/style/index.ts
@@ -10,22 +10,22 @@ export interface ComponentToken {
* @desc 开关高度
* @descEN Height of Switch
*/
- trackHeight: number;
+ trackHeight: number | string;
/**
* @desc 小号开关高度
* @descEN Height of small Switch
*/
- trackHeightSM: number;
+ trackHeightSM: number | string;
/**
* @desc 开关最小宽度
* @descEN Minimum width of Switch
*/
- trackMinWidth: number;
+ trackMinWidth: number | string;
/**
* @desc 小号开关最小宽度
* @descEN Minimum width of small Switch
*/
- trackMinWidthSM: number;
+ trackMinWidthSM: number | string;
/**
* @desc 开关内边距
* @descEN Padding of Switch
@@ -108,6 +108,11 @@ const genSwitchSmallStyle: GenerateStyle = token => {
[`${componentCls}-inner`]: {
paddingInlineStart: innerMaxMarginSM,
paddingInlineEnd: innerMinMarginSM,
+
+ [`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: {
+ minHeight: trackHeightSM,
+ },
+
[`${switchInnerCls}-checked`]: {
marginInlineStart: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`,
marginInlineEnd: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`,
@@ -268,6 +273,7 @@ const genSwitchInnerStyle: GenerateStyle = token => {
fontSize: token.fontSizeSM,
transition: `margin-inline-start ${token.switchDuration} ease-in-out, margin-inline-end ${token.switchDuration} ease-in-out`,
pointerEvents: 'none',
+ minHeight: trackHeight,
},
[`${switchInnerCls}-checked`]: {
@@ -327,7 +333,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
boxSizing: 'border-box',
minWidth: trackMinWidth,
height: trackHeight,
- lineHeight: `${unit(trackHeight)}`,
+ lineHeight: unit(trackHeight),
verticalAlign: 'middle',
background: token.colorTextQuaternary,
border: '0',
@@ -365,7 +371,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
direction: 'rtl',
},
},
- } as CSSObject;
+ };
};
// ============================== Export ==============================