feat(Switch): support shape prop#3855
Open
Seeridia wants to merge 2 commits into
Open
Conversation
Seeridia
requested review from
LoopZhou,
chaishi,
liweijie0812,
maoyiluo,
uyarn and
xiaosansiji
as code owners
This was referenced Jul 2, 2026
There was a problem hiding this comment.
Pull request overview
This PR adds a new shape prop to the Switch component to support multiple visual shapes (circle, round, line), including rendering behavior changes for line (no label/content), plus documentation and demos to expose the new API.
Changes:
- Added
shapeto Switch TS types, runtime props (with default/validator), and usage metadata. - Updated Switch rendering to apply a shape modifier class and to skip rendering label/content when
shape="line". - Updated CN/EN docs and added both Options API and Composition API demos for shape variants.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/switch/type.ts | Adds shape to TdSwitchProps TS interface. |
| src/switch/switch.tsx | Applies shape modifier class and adjusts rendering to hide content for line. |
| src/switch/switch.md | Documents the new shape prop in Chinese docs table. |
| src/switch/switch.en-US.md | Documents the new shape prop in English docs table. |
| src/switch/props.ts | Adds runtime shape prop definition (default + validator). |
| src/switch/_usage/props.json | Adds shape to usage metadata/options for documentation tooling. |
| src/switch/_example/shape.vue | Adds Options API demo for shape variants. |
| src/switch/_example-composition/shape.vue | Adds Composition API demo for shape variants. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This was referenced Jul 2, 2026
Author
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？
🔗 相关 Issue
Related issue: Tencent/tdesign-common#2563
💡 需求背景和解决方案
为 Switch 增加多形态外观支持，配合组件库侧新增的
shapeAPI：circle：默认胶囊形态。round：圆角矩形形态，样式由tdesign-common提供。line：线性形态，样式由tdesign-common提供。相关 PR：
设计稿：https://www.figma.com/design/r9jPY6A4EUDvEdoWQ1LVxe/TDesign-for-web--Community----Select?node-id=45757-378235&t=5X597ofKeSefwy0q-1
📝 更新日志
feat(Switch): 新增 Web Switch
round和line形态样式本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单