Button Group 按钮组

把相关按钮组合在一起并统一样式的容器。内部请使用 ghost 按钮：由按钮组绘制共享的外框并裁切圆角（插槽子组件无法被重新设置样式）。

基础用法

SButtonGroup() {
  SButton({ variant: 'ghost', text: 'Archive' })
  SButtonGroupSeparator()
  SButton({ variant: 'ghost', text: 'Report' })
  SButtonGroupSeparator()
  SButton({ variant: 'ghost', sizing: 'icon', icon: 'ellipsis', label: 'More' })
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

方向与无边框

SButtonGroup({ orientation: 'vertical' }) {
  SButton({ variant: 'ghost', sizing: 'icon', icon: 'plus', label: 'Zoom in' })
  SButtonGroupSeparator()
  SButton({ variant: 'ghost', sizing: 'icon', icon: 'minus', label: 'Zoom out' })
}
// borderless group of filled buttons
SButtonGroup({ outlined: false }) {
  SButton({ text: 'Merge' })
  SButtonGroupSeparator()
  SButton({ sizing: 'icon', icon: 'chevron-down', label: 'More options' })
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SButtonGroup

shadcn-vue 的 ButtonGroup：将多个按钮在视觉上合并为一个控件。

限制：ArkUI 无法为插槽中的子组件重新设置样式，因此该组件无法像 shadcn 的 [&>*:not(:first-child)]:rounded-l-none 那样去掉每个 SButton 的内侧圆角 / 边框。取而代之，分组会去除间距，把子组件裁剪成一个统一的圆角形状，并且（设置 outlined 时）自行绘制共享的外轮廓与阴影。在带轮廓的分组中请使用 ghost（或无边框）按钮，并在它们之间放置 SButtonGroupSeparator；否则 outline 按钮会显示双重边框。

属性	类型	默认值	说明
orientation	ButtonGroupOrientation ButtonGroupOrientation = 'horizontal' | 'vertical'	'horizontal'
outlined	boolean	true	绘制共享的 border shadow-xs 外轮廓（类似一组 outline 按钮）。

插槽: 子组件（尾随闭包）

SButtonGroupSeparator

分组按钮之间 1vp 的分割线（bg-input），贯穿分组的交叉轴。

无属性。