Skip to content

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

Closed
shide-chuanzhang wants to merge 1 commit into
Tencent:developfrom
shide-chuanzhang:feat/switch-shape
Closed

feat(switch): 支持 circle/round/line 三种 shape#4342
shide-chuanzhang wants to merge 1 commit 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。

@tdesign-bot

Copy link
Copy Markdown
Collaborator

TDesign Component Site Preview Open

Component Preview
tdesign-react 完成
@tdesign-react/chat 完成

@pkg-pr-new

pkg-pr-new Bot commented Jul 31, 2026

Copy link
Copy Markdown
  • tdesign-react-demo

    npm i https://pkg.pr.new/Tencent/tdesign-react@4342
    
    npm i https://pkg.pr.new/Tencent/tdesign-react/@tdesign-react/chat@4342
    

commit: 59a7678

@uyarn

uyarn commented Aug 14, 2026

Copy link
Copy Markdown
Collaborator

duplicate of #4320

@uyarn uyarn closed this Aug 14, 2026
@github-actions github-actions Bot added the duplicate this issue or pull request already exists label Aug 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

duplicate this issue or pull request already exists

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants