Skip to content

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

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

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

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.

2 participants