Skip to content

feat(checkbox): support button style variant - #2618

Open
LiamFan16-mikasa wants to merge 2 commits into
Tencent:developfrom
LiamFan16-mikasa:feat/checkbox-button-variant
Open

feat(checkbox): support button style variant#2618
LiamFan16-mikasa wants to merge 2 commits into
Tencent:developfrom
LiamFan16-mikasa:feat/checkbox-button-variant

Conversation

@LiamFan16-mikasa

@LiamFan16-mikasa LiamFan16-mikasa commented Jul 7, 2026

Copy link
Copy Markdown

Closes #2562

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

related to #2562

💡 需求背景和解决方案

背景:在 CRM / OA 等后台管理系统中,管理员常需要一次性勾选十几个权限项。传统 Checkbox 列表存在几个痛点:

  1. 权限项多时(10+),传统多选框列表冗长,用户需逐行核对"勾"的状态,容易漏看或误判;
  2. 频繁点击小方框易产生疲劳感;
  3. "勾"的视觉对比弱,无法满足后台系统"清晰可控、操作结果明确"的诉求。

方案:对齐 RadioGroup 已有的 button 风格能力,为 CheckboxGroup 新增按钮风格变体。选中项通过深色描边 / 深色填充突出,未选中项为浅色描边或透明背景,用户能快速定位已选中的权限。

亮点

  • 直接命中后台系统"十几项权限一次勾选"的高频场景,解决逐行核对易漏看的问题
  • 三种风格开箱即用:outline 描边 / 默认色填充 / 主色填充
  • 视觉与交互语义完全对齐 RadioGroup 的按钮风格,学习成本为零
  • 尺寸、hover/checked/disabled 三态、横纵向排列全覆盖,不是半成品

样式实现(本 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:纵向排列,按钮撑满宽度;
    • 三档 size(s / m / l)适配高度、字号、内边距;
    • hover / checked / disabled 三态齐全。

框架侧接入:本 PR 仅完成公共样式层。tdesign-vue-next 侧 CheckboxGroup 已通过新增 variant prop 透出上述 class 完成对接,见 Tencent/tdesign-vue-next#6788;tdesign-react 等其他框架可比照同样的方式接入,逻辑类比现有 RadioGroup 的 button 变体。

效果预览(GIF 见下方,基于本地联调 tdesign-vue-next 完成,因为本仓库单独运行无法直接渲染出效果):

chrome-capture-2026-07-07-1

📝 更新日志

  • feat(checkbox): CheckboxGroup 新增按钮风格多选样式,支持 outline/default-filled/primary-filled 三种风格与横向/纵向排列
  • 本条 PR 不需要纳入 Changelog

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

⚠️ 请自检并全部勾选全部选项⚠️

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants