ButtonGroup 按钮组

按钮组：将多个 oas-button 组合为一个选值组，相邻按钮圆角合并、hover 只亮当前项。

基本用法

基础按钮组

一月二月三月

示例代码

类型与尺寸透传

type / size 会统一透传给组内所有子按钮。size 支持 xs / small / medium（默认）/ large / xl 五档。

类型与尺寸透传

左中右超小超小超小超大超大超大

示例代码

单选

通过 value 声明当前选中项，点击派发 oas-change，detail 为 { value }。

单选选值组

选项 A选项 B选项 C

示例代码

多选

加 multiple 开启多选，value 用逗号分隔多个选中值，点击派发 oas-change，detail 为 { value: [] }。

多选选值组

标签 A标签 B标签 C

示例代码

可访问名称

aria-label 为按钮组容器设置可访问名称，屏幕阅读器将其朗读为一个可聚焦的按钮组；未设置时走内置 i18n「按钮组」。同页存在多个按钮组时，用名称区分它们。

aria-label 可访问名称

列表视图网格视图导出 CSV导出 PDF

示例代码

纵向

纵向按钮组

置顶置中置底

示例代码

禁用与混排

disabled 禁用整个组；组内无 value 属性的按钮为普通按钮，不参与选值。

禁用与混排

已禁用已禁用保存删除更多操作

示例代码

API

属性

属性	说明	类型	默认值
aria-label	组容器可访问名称（默认走 i18n「按钮组」）	—	—
disabled	禁用整个组	boolean	—
multiple	多选模式	boolean	—
size	透传给子按钮的尺寸	string	—
type	透传给子按钮的类型	string	—
value	选中值（单选为单值，多选用逗号分隔）	string	—
vertical	纵向堆叠，圆角合并方向改为上下	—	—

事件

事件	说明
oas-change	选中变化。单选 detail: { value }；多选 detail: { value: [] }

插槽

名称	说明
默认	—

说明：子按钮通过 value 属性声明其选值；不带 value 的子按钮是普通按钮，不参与选值、不派发 oas-change。选中态通过子按钮 aria-pressed 表达，可用 oas-button[aria-pressed='true'] 自定义选中样式。