feat(checkbox): 支持独立按钮风格多选框组 - #2641
Closed
xy200303 wants to merge 2 commits into
Closed
Conversation
Collaborator
|
@xy200303 谢谢你参与,写了非常详细的对比,但是同时我们也需要你的完成内容包括提交任意一侧(react/vue-next)的API实现代码,和其他提交者一样,其他任务的PR也是一样的,谢谢 |
8 tasks
Contributor
Author
|
@uyarn 已按要求补充组件侧实现,React 侧 API 代码已提交:Tencent/tdesign-react#4340 实现要点:
|
Collaborator
|
谢谢参与犀牛鸟活动,讨论后这个issue 决定采纳 #2618 继续推进 |
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
Closes #2562
💡 需求背景和解决方案
为 CheckboxGroup 补充按钮风格的公共样式,面向权限分配、功能开关等需要快速核对多个已选项的场景。
本方案不复用单选分段控件的连体边框或单一滑块:每个选项保持独立边框和圆角,选中背景直接落在对应选项上。因此可同时清晰表达多个已选权限,并在横向空间不足时自然换行,不会出现断开的连体边框或模糊的组边界。
与 #2600、#2612 的具体差异
两份已有 PR 都完整覆盖了按钮样式的基本能力,本 PR 的差异不在于重复增加形态,而是针对 issue 中“10+ 权限项、高频核对”的场景选择了不同的布局语义:独立多选按钮,而不是把 Checkbox 按 Radio 的连体分段控件处理。
gap: 0,按钮通过首尾圆角、移除右边框及相邻兄弟选择器拼成一个整体@checkbox-button-outline-gap分隔margin-top: -1px、恢复左右边框及层级修正;横向换行仍依赖首尾节点规则align-items: stretch;换行、增删、重排选项不会破坏边框闭合primary-filled接入t-checkbox-group--primary-filled自身即包含 filled 容器基础样式,消费端无需叠加额外 class 才能得到完整视觉这不是对已有 PR 的功能否定:三种形态、尺寸、禁用态等能力保持一致;本方案将重点放在高密度多选场景中的可扫描性、响应式稳定性和 CSS 规则的局部性。
t-checkbox-button及 outline、filled、primary-filled 三种形态📝 更新日志
feat(Checkbox): CheckboxGroup 支持独立按钮风格多选样式
本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单