Skip to content

feat(Checkbox): CheckboxGroup 支持独立按钮风格多选框组 - #4340

Open
xy200303 wants to merge 1 commit into
Tencent:developfrom
xy200303:feat/checkbox-group-button-style
Open

feat(Checkbox): CheckboxGroup 支持独立按钮风格多选框组#4340
xy200303 wants to merge 1 commit into
Tencent:developfrom
xy200303:feat/checkbox-group-button-style

Conversation

@xy200303

Copy link
Copy Markdown

🤔 这个 PR 的性质是?

  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进

🔗 相关 Issue

💡 需求背景和解决方案

权限分配、功能开关等场景需要快速核对多个已选项。本 PR 为 CheckboxGroup 补充按钮风格的组件实现,配合 tdesign-common#2641 的独立按钮样式:每个选项保持独立边框和圆角,选中背景直接落在对应选项上,横向空间不足时自然换行。

#4337 的连体分段方案不同,本方案选项互不共享边框,多个已选项互不影响,增删、重排、换行均不会破坏边框闭合。

最终 API(CheckboxGroup 新增)

属性 类型 默认值 说明
theme checkbox / button checkbox 决定 options 渲染风格,button 时使用按钮风格
variant outline / default-filled / primary-filled default-filled 按钮形态,仅 theme 为 button 生效
size small / medium / large medium 组件尺寸,仅 theme 为 button 生效
direction horizontal / vertical horizontal 按钮排列方式

用法:

<Checkbox.Group theme="button" variant="default-filled" options={options} />

实现说明

  • 新增 Checkbox.Button 组件,基于 common/Check 扩展 checkbox-button 类型,根节点输出 t-checkbox-button,内部元素复用 t-checkbox__former/input/label,与 tdesign-common#2641 的样式选择器对齐
  • 按钮风格相关类名仅在 theme="button" 时输出,不影响默认渲染
  • Checkbox.Button 子节点可被 max / checkAll 逻辑正确识别

验证

  • 新增 10 个按钮风格单测,checkbox 22 个测试全部通过
  • radio 44 个测试全部通过(共用 Check 组件无回归)
  • lint:tsc、eslint、csr/ssr 快照测试通过,已补充 3 个新 demo 的快照

📝 更新日志

  • feat(Checkbox): CheckboxGroup 支持按钮风格多选

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

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

- add theme/variant/size/direction API to CheckboxGroup
- options render as independent tag-like buttons when theme is button
- add Checkbox.Button component, reusing t-checkbox inner class names
- support outline, default-filled and primary-filled variants and vertical layout
- related to Tencent/tdesign-common#2562, works with Tencent/tdesign-common#2641
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.

1 participant