feat(switch): 支持 circle/round/line 三种 shape - #2651
Open
shide-chuanzhang wants to merge 1 commit into
Open
Conversation
line 形态做了几个单独处理： - 选中态轨道用半透明品牌色，line 整体偏轻，实色太重 - handle 加 1px border，禁用态去掉 shadow 后边缘仍清晰 - 暴露 CSS 变量，运行时定制轨道色不用加 prop - 补了 :focus-visible，键盘能切到开关 - line 不渲染 content DOM，从 label 推导 aria-label round 改了 track 和 handle 的圆角。 issue Tencent#2563
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
2 participants
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.
对应 issue #2563，给 Switch 加了 shape 属性，支持 circle（默认）、round、line 三种。
round 比较简单，改了 track 和 handle 的圆角就行。
line 做了一些单独处理。选中态轨道用半透明品牌色而不是实色，因为 line 整体偏轻，实色蓝会显得太重。handle 加了 1px border，这样禁用态去掉 shadow 后边缘还是清晰的，不用给禁用态单独写一套。颜色定制走 CSS 变量，暴露了四个变量，运行时覆盖就能换色，不用加 checkedColor 这种 prop。另外补了 :focus-visible，现有组件 outline: none 键盘用不了。暗色模式在支持 color-mix() 的浏览器里自动跟随品牌色。
只改了 style 下的 _var.less 和 _index.less。组件代码（React）在 tdesign-react 仓库，对应 PR tdesign-react#4342。