Skip to content

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

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

feat(checkbox): support button style variant#6788
LiamFan16-mikasa wants to merge 3 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

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

related to Tencent/tdesign-common#2562
样式实现见 Tencent/tdesign-common#2618

💡 需求背景和解决方案

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

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

方案:对齐 RadioGroup 已有的 button 风格能力,为 CheckboxGroup 新增 variant / direction 属性,透出公共样式层(Tencent/tdesign-common#2618)定义的按钮风格 class,选中项深色描边/填充突出,未选中项浅色描边或透明背景。

亮点

  • 直接命中后台系统"十几项权限一次勾选"的高频场景
  • 三种风格随手切换:outline 描边 / default-filled 填充 / primary-filled 主色填充
  • 横向、纵向排列都支持
  • 接入成本低:只加两个属性,不影响现有用法,无 breaking change
  • RadioGroup 按钮风格逻辑对齐,复用同一套设计语言

框架侧改动props.ts/type.ts 新增 variant/direction 定义,group.tsx/checkbox.tsx 渲染逻辑透出对应 class,补充 3 个 demo、API 文档中英文、_usage/props.json、单元测试。

效果预览

chrome-capture-2026-07-07-1

📝 更新日志

  • 本条 PR 不需要纳入 Changelog

tdesign-vue-next

  • feat(checkbox): CheckboxGroup 新增 variant/direction 属性,支持按钮风格(outline/default-filled/primary-filled)与横向/纵向排列

@tdesign-vue-next/chat

@tdesign-vue-next/nuxt

@tdesign-vue-next/auto-import-resolver

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

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

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

@Wesley-0808 Wesley-0808 changed the title feat(checkbox): support button style variant [犀牛鸟]feat(checkbox): support button style variant Jul 20, 2026
@uyarn uyarn added the 💭 discussion we are discussing label Jul 29, 2026
@uyarn

uyarn commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

/update-common 2618

@tdesign-bot

Copy link
Copy Markdown
Collaborator

TDesign Component Site Preview Open

Component Preview
tdesign-vue-next 完成
@tdesign-vue-next/chat 完成

@pkg-pr-new

pkg-pr-new Bot commented Jul 31, 2026

Copy link
Copy Markdown
  • tdesign-vue-next-demo

    npm i https://pkg.pr.new/@tdesign-vue-next/auto-import-resolver@6788
    
    npm i https://pkg.pr.new/tdesign-vue-next@6788
    
    npm i https://pkg.pr.new/@tdesign-vue-next/chat@6788
    
    npm i https://pkg.pr.new/@tdesign-vue-next/nuxt@6788
    

commit: 5c84ce2

@uyarn uyarn changed the title [犀牛鸟]feat(checkbox): support button style variant feat(checkbox): support button style variant Aug 11, 2026
@uyarn uyarn removed the 💭 discussion we are discussing label Aug 11, 2026
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.

3 participants