Skip to content

feat(checkbox): 支持独立按钮风格多选框组 - #2641

Closed
xy200303 wants to merge 2 commits into
Tencent:developfrom
xy200303:feat/checkbox-group-button-style
Closed

feat(checkbox): 支持独立按钮风格多选框组#2641
xy200303 wants to merge 2 commits into
Tencent:developfrom
xy200303:feat/checkbox-group-button-style

Conversation

@xy200303

@xy200303 xy200303 commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

Closes #2562

💡 需求背景和解决方案

为 CheckboxGroup 补充按钮风格的公共样式,面向权限分配、功能开关等需要快速核对多个已选项的场景。

本方案不复用单选分段控件的连体边框或单一滑块:每个选项保持独立边框和圆角,选中背景直接落在对应选项上。因此可同时清晰表达多个已选权限,并在横向空间不足时自然换行,不会出现断开的连体边框或模糊的组边界。

#2600#2612 的具体差异

两份已有 PR 都完整覆盖了按钮样式的基本能力,本 PR 的差异不在于重复增加形态,而是针对 issue 中“10+ 权限项、高频核对”的场景选择了不同的布局语义:独立多选按钮,而不是把 Checkbox 按 Radio 的连体分段控件处理。

对比维度 #2600 / #2612 本 PR #2641
outline 的视觉拓扑 gap: 0,按钮通过首尾圆角、移除右边框及相邻兄弟选择器拼成一个整体 每项保留完整边框和圆角,使用语义化间距 @checkbox-button-outline-gap 分隔
多选反馈 已选项需同时参与相邻边框补偿,样式正确性依赖前后兄弟节点 已选背景和描边只落在当前项;任意多个已选项均互不影响
换行与纵向布局 连体边框在纵向需 margin-top: -1px、恢复左右边框及层级修正;横向换行仍依赖首尾节点规则 使用普通 flex 换行与 align-items: stretch;换行、增删、重排选项不会破坏边框闭合
primary-filled 接入 filled 容器基础样式与 primary 颜色修饰是分开的 t-checkbox-group--primary-filled 自身即包含 filled 容器基础样式,消费端无需叠加额外 class 才能得到完整视觉
表单校验 连体结构需额外处理末项右边框色 独立边框可直接复用 Form 的统一校验边框规则,无末项特例

这不是对已有 PR 的功能否定:三种形态、尺寸、禁用态等能力保持一致;本方案将重点放在高密度多选场景中的可扫描性、响应式稳定性和 CSS 规则的局部性。

  • 新增 t-checkbox-button 及 outline、filled、primary-filled 三种形态
  • 支持大、中、小尺寸和纵向布局
  • 覆盖 hover、focus-visible、disabled、indeterminate 与表单校验状态
  • 新增中英文 API 与设计说明

📝 更新日志

  • feat(Checkbox): CheckboxGroup 支持独立按钮风格多选样式

  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须提供
  • Changelog 已提供或无须提供

@uyarn

uyarn commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

@xy200303 谢谢你参与,写了非常详细的对比,但是同时我们也需要你的完成内容包括提交任意一侧(react/vue-next)的API实现代码,和其他提交者一样,其他任务的PR也是一样的,谢谢

@github-actions

github-actions Bot commented Jul 29, 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 👀

@xy200303

Copy link
Copy Markdown
Contributor Author

@uyarn 已按要求补充组件侧实现,React 侧 API 代码已提交:Tencent/tdesign-react#4340

实现要点:

  • CheckboxGroup 新增 theme / variant / size / direction 四个 API,theme="button" 时以按钮风格渲染选项
  • 新增 Checkbox.Button 组件,内部元素复用 t-checkbox__former/input/label,与本 PR 的样式选择器对齐
  • 按钮风格类名仅在 theme="button" 时输出,不影响默认渲染;max / checkAll 逻辑对 Checkbox.Button 子节点同样生效
  • 已补充 button / button-size / button-variant 三个 demo(对应本 PR 文档中的 {{ button }} 等占位)、10 个单测及 csr/ssr 快照,checkbox 与 radio 测试全部通过

@uyarn

uyarn commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator

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

@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.

[Checkbox] 多选框组支持按钮风格

3 participants