u

code/g3soft-libs/docs/examples/space/basic.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// 默认 horizontal + small(8px) + 交叉轴 center
+import { G3Button, G3Space } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Space>
+    <G3Button type="outline" size="small">按钮</G3Button>
+    <G3Button type="outline" size="small">按钮</G3Button>
+    <span style="font-size: 13px; color: #6b7280">文字</span>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/space/empty-children.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// 空节点（v-if 为 false、注释）不会占位，因此条件渲染不会多出空隙
+import { ref } from 'vue'
+import { G3Button, G3Space, G3Switch } from '@g3soft/ui'
+
+const showDelete = ref(false)
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex">
+    <G3Switch v-model="showDelete">显示「删除」按钮</G3Switch>
+    <G3Space :size="8">
+      <G3Button type="outline" size="small">编辑</G3Button>
+      <G3Button type="outline" size="small">复制</G3Button>
+      <!-- 关掉时这里不会留下多余间距 -->
+      <G3Button v-if="showDelete" type="danger-outline" size="small">删除</G3Button>
+    </G3Space>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/space/separator.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+// #separator 插槽：在子元素之间插入分隔内容（如竖线、圆点）
+import { G3Button, G3Space } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Space :size="8">
+    <G3Button type="link" size="small">编辑</G3Button>
+    <G3Button type="link" size="small">复制</G3Button>
+    <G3Button type="link" size="small">删除</G3Button>
+
+    <template #separator>
+      <span style="color: #d9d9d9">|</span>
+    </template>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/space/size.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+// size 支持预设名、数字（px）、[水平, 垂直] 数组
+import { G3Button, G3Space } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="16" style="display: flex">
+    <G3Space size="small">
+      <G3Button size="small" type="outline">small 8px</G3Button>
+      <G3Button size="small" type="outline">small 8px</G3Button>
+    </G3Space>
+
+    <G3Space size="middle">
+      <G3Button size="small" type="outline">middle 16px</G3Button>
+      <G3Button size="small" type="outline">middle 16px</G3Button>
+    </G3Space>
+
+    <G3Space size="large">
+      <G3Button size="small" type="outline">large 24px</G3Button>
+      <G3Button size="small" type="outline">large 24px</G3Button>
+    </G3Space>
+
+    <!-- 数字即 px -->
+    <G3Space :size="32">
+      <G3Button size="small" type="outline">32px</G3Button>
+      <G3Button size="small" type="outline">32px</G3Button>
+    </G3Space>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/space/vertical.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// 纵向排列：vertical 简写，或 orientation="vertical"
+import { G3Button, G3Space } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Space vertical :size="8" style="width: 160px; display: flex">
+    <G3Button type="outline" block>第一行</G3Button>
+    <G3Button type="outline" block>第二行</G3Button>
+    <G3Button type="outline" block>第三行</G3Button>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/space/wrap.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// wrap 只在水平方向生效；size 用数组可分别控制「列间距 / 行间距」
+import { G3Button, G3Space } from '@g3soft/ui'
+</script>
+
+<template>
+  <div style="width: 240px; padding: 12px; border: 1px dashed #d9d9d9; border-radius: 8px">
+    <G3Space wrap :size="[8, 12]">
+      <G3Button v-for="index in 6" :key="index" type="outline" size="small">
+        按钮 {{ index }}
+      </G3Button>
+    </G3Space>
+  </div>
+</template>