组件 · 通用

ButtonGroup 按钮组

并列按钮容器,统一间距与边框衔接。

入口 @selrux/ui/button-group · 源码 src/components/button-group/index.ts · 3 个组件 · 发布状态 preview

使用建议

  • 避免:组内混入无关布局
  • 限制:属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准,禁止臆造

引入

tsx
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from '@selrux/ui/button-group';

演练场

调节下方可实现的字面量属性,实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

组合预览:组内为 outline Button。

代码演示

基础用法

相邻按钮合并为一组,共享边框与圆角。

分隔与文本

ButtonGroupSeparator 分隔子组,ButtonGroupText 放置说明文字。

每页

纵向排列

orientation="vertical"。

分隔线方向

ButtonGroupSeparator 的 orientation 与组方向一致。

API

属性覆盖:示例用到 2 / 2 个自有属性(100%)

由 scripts/demo-coverage.mjs 统计,不含 className / style / 原生透传属性与纯转发事件。

ButtonGroup

属性说明类型默认值
orientation-"horizontal" | "vertical"-

另有 280 项原生属性与事件继承自 HTMLAttributes,原样透传。

ButtonGroupSeparator

属性说明类型默认值
orientation-"horizontal" | "vertical"-

另有 280 项原生属性与事件继承自 HTMLAttributes,原样透传。

ButtonGroupText

无自有属性;其余 280 项原生属性继承自 HTMLAttributes。

导出类型:ButtonGroupOrientation、ButtonGroupProps、ButtonGroupSeparatorProps、ButtonGroupTextProps