u

code/g3soft-libs/docs/examples/button-group/basic.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// 贴合排列：中间边框重叠 1px，首尾保留圆角
+import { G3Button, G3ButtonGroup } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3ButtonGroup>
+    <G3Button>左</G3Button>
+    <G3Button>中</G3Button>
+    <G3Button>右</G3Button>
+  </G3ButtonGroup>
+</template>

code/g3soft-libs/docs/examples/button-group/variant.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// 组内按钮仍各自保留 type / size；混排时建议统一变体
+import { G3Button, G3ButtonGroup, G3Space } from '@g3soft/ui'
+import { AlignCenter, AlignLeft, AlignRight } from '@lucide/vue'
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex">
+    <G3ButtonGroup>
+      <G3Button type="outline">描边组</G3Button>
+      <G3Button type="outline">描边组</G3Button>
+      <G3Button type="outline">描边组</G3Button>
+    </G3ButtonGroup>
+
+    <!-- 图标工具条：只保留首尾圆角 -->
+    <G3ButtonGroup>
+      <G3Button type="icon" aria-label="左对齐"><template #icon><AlignLeft /></template></G3Button>
+      <G3Button type="icon" aria-label="居中"><template #icon><AlignCenter /></template></G3Button>
+      <G3Button type="icon" aria-label="右对齐"><template #icon><AlignRight /></template></G3Button>
+    </G3ButtonGroup>
+
+    <G3ButtonGroup>
+      <G3Button size="small" type="outline">小号</G3Button>
+      <G3Button size="small" type="outline">小号</G3Button>
+      <G3Button size="small" type="outline">小号</G3Button>
+    </G3ButtonGroup>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/button-group/vertical.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// orientation="vertical"：纵向贴合，组内按钮等宽
+import { G3Button, G3ButtonGroup } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3ButtonGroup orientation="vertical" style="width: 140px">
+    <G3Button type="outline">上传</G3Button>
+    <G3Button type="outline">下载</G3Button>
+    <G3Button type="outline">分享</G3Button>
+  </G3ButtonGroup>
+</template>