AgnosticUI 新增：SelectionButtonGroup 与 SelectionCardGroup

Source: Dev.to

SelectionButtonGroup

按钮样式的单选/复选控件，适用于紧凑的选择 UI。

适用场景

• 标签/过滤器选择
• 多选胶囊按钮
• 紧凑的偏好切换
• 表单输入中卡片显得过于沉重的情况

特性

• 3 种尺寸：sm、md、lg
• 3 种形状：矩形、圆角、胶囊
• 6 种主题：primary、success、info、warning、error、monochrome
• 完整的键盘导航（方向键）
• 使用正确的 ARIA 语义实现可访问性

  Credit Card
  PayPal

SelectionCardGroup

基于卡片的选择 UI，适用于富内容选择。

适用场景

• 入职引导流程
• 价格套餐选择
• 功能偏好设置
• 用户兴趣

特性

• 单选（radio）和多选（checkbox）模式
• 插槽内容支持丰富卡片
• 响应式网格布局
• CSS Parts API，便于深度定制
• 与按钮组相同的键盘导航和可访问性

  
    Analytics
    
Track user behavior

Compatibility

• 框架： React、Vue、Lit/Web Components、Svelte
• 模式： 受控 & 非受控

这些组件是在构建我们的入职引导手册（类似登录手册，但针对用户入职流程）时自然产生的。当你真正构建 UI 模式时，组件会自行显现！

入职引导手册将在本周晚些时候发布 🎉