Skip to content

feat(switch): support square and line shape variants - #2579

Closed
Actv6 wants to merge 1 commit into
Tencent:developfrom
Actv6:feature/web/switch-shape
Closed

feat(switch): support square and line shape variants#2579
Actv6 wants to merge 1 commit into
Tencent:developfrom
Actv6:feature/web/switch-shape

Conversation

@Actv6

@Actv6 Actv6 commented Jul 1, 2026

Copy link
Copy Markdown

Add two new shape modifiers alongside the existing round appearance,
addressing #2563:

  • .t-switch--shape-square: rounded-rectangle track and handle
  • .t-switch--shape-line: thin track rendered via ::before, with the
    circular handle floating on top

Introduces @switch-shape-square-border-radius and
@switch-line-track-height-{l,default,s} tokens for downstream theming.

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

  • close Tencent/tdesign#2563 [Switch] 支持方形等外观设计

💡 需求背景和解决方案

背景

Switch 组件当前仅提供圆形(round)外观,样式过于单一,不便于设计和开发。Issue #2563 希望补齐 square(圆角矩形)与 line(线性)两种外观。

方案

style/web/components/switch/ 下按 TDesign 一贯的 --shape-xxx 修饰符约定(参考 Button 组件)新增两个类,默认外观(不加 modifier)保持为 round

Add two new shape modifiers alongside the existing round appearance,
addressing Tencent#2563:
- .t-switch--shape-square: rounded-rectangle track and handle
- .t-switch--shape-line: thin track rendered via ::before, with the
  circular handle floating on top

Introduces @switch-shape-square-border-radius and
@switch-line-track-height-{l,default,s} tokens for downstream theming.
@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

TDesign Component Repositories CI Test Open

Component Lint Test Build Preview
tdesign-vue 👀
tdesign-vue-next 👀
tdesign-react 👀
tdesign-mobile-vue 👀
tdesign-mobile-react 👀

@uyarn

uyarn commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator

谢谢参与犀牛鸟活动,讨论后这个issue 决定采纳 #2604 继续推进

@uyarn uyarn closed this Aug 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants