feat(checkbox): support button style variant - #2618
Open
LiamFan16-mikasa wants to merge 2 commits into
Open
Conversation
16 tasks
This was referenced Aug 11, 2026
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.
Closes #2562
🤔 这个 PR 的性质是?
🔗 相关 Issue
related to #2562
💡 需求背景和解决方案
背景:在 CRM / OA 等后台管理系统中,管理员常需要一次性勾选十几个权限项。传统 Checkbox 列表存在几个痛点:
方案:对齐
RadioGroup已有的 button 风格能力,为CheckboxGroup新增按钮风格变体。选中项通过深色描边 / 深色填充突出,未选中项为浅色描边或透明背景,用户能快速定位已选中的权限。亮点
RadioGroup的按钮风格,学习成本为零样式实现(本 PR 范围):在
style/web/components/checkbox/下扩展样式:_var.less新增@checkbox-button--cls元素类,以及 outline / filled / primary-filled 三种风格的颜色、尺寸、字号、padding、动画变量;_index.less在.t-checkbox-group上新增以下修饰类:.t-checkbox-group__outline:外描边风格,选中态品牌色描边 + 浅色底;.t-checkbox-group--filled:默认色填充风格,选中项为高亮块;.t-checkbox-group--primary-filled:主色填充风格,选中态品牌色底 + 反色文字;.t-checkbox-group--vertical:纵向排列,按钮撑满宽度;框架侧接入:本 PR 仅完成公共样式层。tdesign-vue-next 侧
CheckboxGroup已通过新增variantprop 透出上述 class 完成对接,见 Tencent/tdesign-vue-next#6788;tdesign-react 等其他框架可比照同样的方式接入,逻辑类比现有RadioGroup的 button 变体。效果预览(GIF 见下方,基于本地联调 tdesign-vue-next 完成,因为本仓库单独运行无法直接渲染出效果):
📝 更新日志
☑️ 请求合并前的自查清单