Skip to content

feat(switch): 支持 circle/round/line 三种 shape - #4342

Open
shide-chuanzhang wants to merge 2 commits into
Tencent:developfrom
shide-chuanzhang:feat/switch-shape
Open

feat(switch): 支持 circle/round/line 三种 shape#4342
shide-chuanzhang wants to merge 2 commits into
Tencent:developfrom
shide-chuanzhang:feat/switch-shape

Conversation

@shide-chuanzhang

@shide-chuanzhang shide-chuanzhang commented Jul 30, 2026

Copy link
Copy Markdown

对应 issue tdesign-common#2563,给 Switch 加了 shape 属性,支持 circle(默认)、round、line 三种。

组件侧的改动:

type.ts 加了 shape?: 'circle' | 'round' | 'line',defaultProps 默认值 circle。

Switch.tsx 做了这些:

  • contentNode 在 line 形态返回 null,content div 也不渲染,减少无用 DOM
  • 加了 derivedAriaLabel,line 形态从 label prop 推导 aria-label,如果调用方显式传了 aria-label 就用传入的
  • className 加了 --shape-{shape} 修饰类
  • 补了 aria-checked 和 aria-disabled

测试覆盖了 shape 切换、line 不渲染 content、aria-label 推导、aria-disabled、aria-checked。

样式部分在 tdesign-common 仓库,对应 PR tdesign-common#2651。

type.ts 和 defaultProps.ts 加了 shape 属性,默认 circle。

Switch.tsx 的改动:
- contentNode 在 line 形态返回 null,不渲染 content DOM
- 加了 derivedAriaLabel,line 形态从 label 推导 aria-label
- className 加了 shape 修饰
- 补了 aria-checked 和 aria-disabled
- content div 在 line 形态不渲染

样式在 tdesign-common 仓库提,对应 PR Tencent#2651。

issue Tencent#2563
rerender 不会重置 state,click 后 innerChecked 仍为 true,
用独立 render 测试默认值 '已关闭'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant