xtf-button-group

组件说明

xtf-button-group 是按钮组容器组件，用于将多个 xtf-button 按水平或垂直方向排列组合。支持统一控制子按钮尺寸、间距和布局方式，子按钮通过 provide/inject 自动继承组配置，适用于操作栏、表单按钮组合等场景。

---

基础用法

1. 最简示例

直接包裹多个 xtf-button 即可水平排列：

<template>
  <xtf-button-group>
    <xtf-button label="取消" type="light" />
    <xtf-button label="确认" type="solid" />
  </xtf-button-group>
</template>

2. 垂直排列与间距

通过 direction 切换排列方向，通过 gap 调整间距：

<template>
  <view>
    <xtf-text level="caption" color="secondary">水平排列</xtf-text>
    <xtf-button-group direction="horizontal" :gap="24">
      <xtf-button label="选项一" type="light" />
      <xtf-button label="选项二" type="light" />
      <xtf-button label="选项三" type="solid" />
    </xtf-button-group>

    <xtf-text level="caption" color="secondary" style="margin-top: 24rpx">垂直排列</xtf-text>
    <xtf-button-group direction="vertical" :gap="16">
      <xtf-button label="微信支付" type="solid" theme="success" block />
      <xtf-button label="支付宝支付" type="outline" block />
    </xtf-button-group>
  </view>
</template>

3. 统一尺寸与块级布局

通过 size 统一子按钮尺寸，通过 block 使按钮组占满整行并均分宽度：

<template>
  <view>
    <xtf-button-group size="sm" :gap="12">
      <xtf-button label="编辑" type="light" />
      <xtf-button label="删除" type="solid" theme="danger" />
    </xtf-button-group>

    <xtf-text level="caption" color="secondary" style="margin-top: 24rpx">块级均分</xtf-text>
    <xtf-button-group block :gap="16">
      <xtf-button label="拒绝" type="light" />
      <xtf-button label="同意" type="solid" />
    </xtf-button-group>
  </view>
</template>

---

全部属性

属性	类型	默认值	作用描述	适用范围
direction	String	'horizontal'	排列方向：'horizontal' 水平 / 'vertical' 垂直	控制排列方向
gap	String | Number	16	按钮间距（rpx）	调整间距
block	Boolean	false	是否块级布局，水平方向子按钮均分宽度	均分宽度
size	String	''	统一子按钮尺寸：'xs' / 'sm' / 'md' / 'lg' / 'xl'	统一大小
customClass	String	''	自定义类名	样式覆盖
customStyle	String | Object	''	自定义样式	动态样式覆盖

---

事件

无自定义事件。

---

插槽

插槽名	说明
默认插槽	放置一个或多个 xtf-button，子按钮会继承组的 size。

---

主题说明

• 按钮间距使用 var(--xtf-button-group-gap, 16rpx)
• 水平排列使用 flex-direction: row，垂直排列使用 flex-direction: column
• 块级布局下水平方向子按钮 flex: 1 均分宽度

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。