Skip to content

feat(switch): support theme api #912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Wesley-0808 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(switch): support theme api #912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified db/TDesign.db
View file
Open in desktop
Binary file not shown.
8 changes: 7 additions & 1 deletion packages/products/tdesign-react/packages/components/switch/defaultProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,10 @@

import { TdSwitchProps } from './type';

export const switchDefaultProps: TdSwitchProps = { disabled: undefined, label: [], loading: false, size: 'medium' };
export const switchDefaultProps: TdSwitchProps = {
disabled: undefined,
label: [],
loading: false,
size: 'medium',
theme: 'round',
};
15 changes: 8 additions & 7 deletions packages/products/tdesign-react/packages/components/switch/switch.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@
name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | className of component | N
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
beforeChange | Function | - | Typescript：`() => boolean \| Promise<boolean>` | N
customValue | Array | - | Typescript：`Array<SwitchValue>` | N
style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
beforeChange | Function | - | Typescript: `() => boolean \| Promise<boolean>` | N
customValue | Array | - | Typescript: `Array<SwitchValue>` | N
disabled | Boolean | undefined | \- | N
label | TNode | [] | Typescript：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
label | TNode | [] | Typescript: `Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
loading | Boolean | false | \- | N
size | String | medium | options: small/medium/large | N
value | String / Number / Boolean | - | Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N
onChange | Function | | Typescript：`(value: T, context: { e: MouseEvent }) => void`<br/> | N
theme | String | round | options: round/rectangle/line | N
value | String / Number / Boolean | - | Typescript: `T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript: `T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N
onChange | Function | | Typescript: `(value: T, context: { e: MouseEvent }) => void`<br/> | N
1 change: 1 addition & 0 deletions packages/products/tdesign-react/packages/components/switch/switch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ disabled | Boolean | undefined | 是否禁用组件。优先级：Switch.disable
label | TNode | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
loading | Boolean | false | 是否处于加载中状态 | N
size | String | medium | 开关尺寸。可选项：small/medium/large | N
theme | String | round | 组件风格。round为圆形，rectangle为矩形，line为线形。可选项：round/rectangle/line | N
value | String / Number / Boolean | - | 开关值。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N
onChange | Function | | TS 类型：`(value: T, context: { e: MouseEvent }) => void`<br/>数据发生变化时触发 | N
9 changes: 7 additions & 2 deletions packages/products/tdesign-react/packages/components/switch/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */

import { TNode } from '../common';
import { MouseEvent } from 'react';
import type { TNode } from '../common';
import type { MouseEvent } from 'react';

export interface TdSwitchProps<T = SwitchValue> {
/**
Expand Down Expand Up @@ -35,6 +35,11 @@ export interface TdSwitchProps<T = SwitchValue> {
* @default medium
*/
size?: 'small' | 'medium' | 'large';
/**
* 组件风格。round为圆形，rectangle为矩形，line为线形
* @default round
*/
theme?: 'round' | 'rectangle' | 'line';
/**
* 开关值
*/
Expand Down
9 changes: 9 additions & 0 deletions packages/products/tdesign-vue-next/packages/components/switch/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,15 @@ export default {
return ['small', 'medium', 'large'].includes(val);
},
},
/** 组件风格。round为圆形，rectangle为矩形，line为线形 */
theme: {
type: String as PropType<TdSwitchProps['theme']>,
default: 'round' as TdSwitchProps['theme'],
validator(val: TdSwitchProps['theme']): boolean {
if (!val) return true;
return ['round', 'rectangle', 'line'].includes(val);
},
},
/** 开关值 */
value: {
type: [String, Number, Boolean] as PropType<TdSwitchProps['value']>,
Expand Down
13 changes: 7 additions & 6 deletions packages/products/tdesign-vue-next/packages/components/switch/switch.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,16 @@

name | type | default | description | required
-- | -- | -- | -- | --
beforeChange | Function | - | Typescript：`() => boolean \| Promise<boolean>` | N
customValue | Array | - | Typescript：`Array<SwitchValue>` | N
beforeChange | Function | - | Typescript: `() => boolean \| Promise<boolean>` | N
customValue | Array | - | Typescript: `Array<SwitchValue>` | N
disabled | Boolean | undefined | \- | N
label | Array / Slot / Function | [] | Typescript：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
label | Array / Slot / Function | [] | Typescript: `Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
loading | Boolean | false | \- | N
size | String | medium | options: small/medium/large | N
value | String / Number / Boolean | - | `v-model` and `v-model:value` is supported。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
onChange | Function | | Typescript：`(value: T, context: { e: MouseEvent }) => void`<br/> | N
theme | String | round | options: round/rectangle/line | N
value | String / Number / Boolean | - | `v-model` and `v-model:value` is supported。Typescript: `T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript: `T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
onChange | Function | | Typescript: `(value: T, context: { e: MouseEvent }) => void`<br/> | N

### Switch Events

Expand Down
1 change: 1 addition & 0 deletions packages/products/tdesign-vue-next/packages/components/switch/switch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ disabled | Boolean | undefined | 是否禁用组件。优先级：Switch.disable
label | Array / Slot / Function | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
loading | Boolean | false | 是否处于加载中状态 | N
size | String | medium | 开关尺寸。可选项：small/medium/large | N
theme | String | round | 组件风格。round为圆形，rectangle为矩形，line为线形。可选项：round/rectangle/line | N
value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/switch/type.ts) | N
onChange | Function | | TS 类型：`(value: T, context: { e: MouseEvent }) => void`<br/>数据发生变化时触发 | N
Expand Down
7 changes: 6 additions & 1 deletion packages/products/tdesign-vue-next/packages/components/switch/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */

import { TNode } from '../common';
import type { TNode } from '../common';

export interface TdSwitchProps<T = SwitchValue> {
/**
Expand Down Expand Up @@ -34,6 +34,11 @@ export interface TdSwitchProps<T = SwitchValue> {
* @default medium
*/
size?: 'small' | 'medium' | 'large';
/**
* 组件风格。round为圆形，rectangle为矩形，line为线形
* @default round
*/
theme?: 'round' | 'rectangle' | 'line';
/**
* 开关值
*/
Expand Down
9 changes: 9 additions & 0 deletions packages/products/tdesign-vue/src/switch/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,15 @@ export default {
return ['small', 'medium', 'large'].includes(val);
},
},
/** 组件风格。round为圆形，rectangle为矩形，line为线形 */
theme: {
type: String as PropType<TdSwitchProps['theme']>,
default: 'round' as TdSwitchProps['theme'],
validator(val: TdSwitchProps['theme']): boolean {
if (!val) return true;
return ['round', 'rectangle', 'line'].includes(val);
},
},
/** 开关值 */
value: {
type: [String, Number, Boolean] as PropType<TdSwitchProps['value']>,
Expand Down
13 changes: 7 additions & 6 deletions packages/products/tdesign-vue/src/switch/switch.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,16 @@

name | type | default | description | required
-- | -- | -- | -- | --
beforeChange | Function | - | Typescript：`() => boolean \| Promise<boolean>` | N
customValue | Array | - | Typescript：`Array<SwitchValue>` | N
beforeChange | Function | - | Typescript: `() => boolean \| Promise<boolean>` | N
customValue | Array | - | Typescript: `Array<SwitchValue>` | N
disabled | Boolean | undefined | \- | N
label | Array / Slot / Function | [] | Typescript：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
label | Array / Slot / Function | [] | Typescript: `Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
loading | Boolean | false | \- | N
size | String | medium | options: small/medium/large | N
value | String / Number / Boolean | - | `v-model` is supported。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N
onChange | Function | | Typescript：`(value: T, context: { e: MouseEvent }) => void`<br/> | N
theme | String | round | options: round/rectangle/line | N
value | String / Number / Boolean | - | `v-model` is supported。Typescript: `T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript: `T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N
onChange | Function | | Typescript: `(value: T, context: { e: MouseEvent }) => void`<br/> | N

### Switch Events

Expand Down
1 change: 1 addition & 0 deletions packages/products/tdesign-vue/src/switch/switch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ disabled | Boolean | undefined | 是否禁用组件。优先级：Switch.disable
label | Array / Slot / Function | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
loading | Boolean | false | 是否处于加载中状态 | N
size | String | medium | 开关尺寸。可选项：small/medium/large | N
theme | String | round | 组件风格。round为圆形，rectangle为矩形，line为线形。可选项：round/rectangle/line | N
value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model`。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N
defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/switch/type.ts) | N
onChange | Function | | TS 类型：`(value: T, context: { e: MouseEvent }) => void`<br/>数据发生变化时触发 | N
Expand Down
7 changes: 6 additions & 1 deletion packages/products/tdesign-vue/src/switch/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */

import { TNode } from '../common';
import type { TNode } from '../common';

export interface TdSwitchProps<T = SwitchValue> {
/**
Expand Down Expand Up @@ -34,6 +34,11 @@ export interface TdSwitchProps<T = SwitchValue> {
* @default medium
*/
size?: 'small' | 'medium' | 'large';
/**
* 组件风格。round为圆形，rectangle为矩形，line为线形
* @default round
*/
theme?: 'round' | 'rectangle' | 'line';
/**
* 开关值
*/
Expand Down
39 changes: 39 additions & 0 deletions packages/scripts/api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127263,6 +127263,45 @@
"String"
]
},
{
"id": 1782915080,
"platform_framework": [
"1",
"2"
],
"component": "Switch",
"field_category": 1,
"field_name": "theme",
"field_type": [
"1"
],
"field_default_value": "round",
"field_enum": "round/rectangle/line",
"field_desc_zh": "组件风格。round为圆形，rectangle为矩形，line为线形",
"field_desc_en": null,
"field_required": 0,
"event_input": "",
"create_time": "2026-07-01 14:11:20",
"update_time": "2026-07-01 14:11:20",
"event_output": null,
"custom_field_type": null,
"syntactic_sugar": null,
"readonly": 1,
"html_attribute": 0,
"trigger_elements": "",
"deprecated": 0,
"version": "",
"test_description": null,
"support_default_value": 0,
"field_category_text": "Props",
"platform_framework_text": [
"Vue(PC)",
"React(PC)"
],
"field_type_text": [
"String"
]
},
{
"id": 134,
"platform_framework": [
Expand Down