u

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// 声明式：默认插槽里写 G3TabPane，tabKey 唯一标识，label 是标签文字
+import { ref } from 'vue'
+import { G3TabPane, G3Tabs } from '@g3soft/ui'
+
+const active = ref('basic')
+</script>
+
+<template>
+  <G3Tabs v-model="active">
+    <G3TabPane tab-key="basic" label="基本信息">基本信息面板内容</G3TabPane>
+    <G3TabPane tab-key="config" label="配置">配置面板内容</G3TabPane>
+    <G3TabPane tab-key="advanced" label="高级" disabled>禁用项不可切换</G3TabPane>
+  </G3Tabs>
+</template>

code/g3soft-libs/docs/examples/tabs/items.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+// items 数据源：适合标签动态来自接口的场景；content 可以是字符串、VNode 或渲染函数
+import { ref } from 'vue'
+import { G3Tabs } from '@g3soft/ui'
+
+const active = ref('list')
+
+const items = [
+  { key: 'list', label: '列表', content: '列表视图内容' },
+  { key: 'board', label: '看板', content: '看板视图内容' },
+  { key: 'timeline', label: '时间线', content: '时间线视图内容' },
+]
+</script>
+
+<template>
+  <G3Tabs v-model="active" :items="items" />
+</template>

code/g3soft-libs/docs/examples/tabs/nav-only.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// navOnly：只渲染标签栏，内容区由外部控制（适合配合路由或分栏布局）
+// #label 自定义标签、#leftExtra / #rightExtra 在标签栏两端加内容
+import { ref } from 'vue'
+import { G3Button, G3Tabs } from '@g3soft/ui'
+
+const active = ref('a')
+
+const items = [
+  { key: 'a', label: '标签 A' },
+  { key: 'b', label: '标签 B' },
+]
+</script>
+
+<template>
+  <G3Tabs v-model="active" :items="items" nav-only>
+    <template #leftExtra>
+      <span style="font-size: 13px; color: #6b7280">项目：</span>
+    </template>
+
+    <template #label="{ item }">
+      <span>{{ item === 'a' ? '标签 A（自定义）' : '标签 B' }}</span>
+    </template>
+
+    <template #rightExtra>
+      <G3Button size="small" type="ghost">+ 新建</G3Button>
+    </template>
+  </G3Tabs>
+
+  <div style="padding: 16px 0; color: #6b7280; font-size: 13px">
+    当前激活：{{ active }}（内容由外部渲染）
+  </div>
+</template>

code/g3soft-libs/docs/examples/tabs/placement.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// placement：top（默认横排）/ left / right（纵向），指示条会自动贴到对应边
+import { ref } from 'vue'
+import { G3TabPane, G3Tabs } from '@g3soft/ui'
+
+const active = ref('one')
+</script>
+
+<template>
+  <G3Tabs v-model="active" placement="left" style="height: 180px">
+    <G3TabPane tab-key="one" label="概览">概览内容</G3TabPane>
+    <G3TabPane tab-key="two" label="成员">成员内容</G3TabPane>
+    <G3TabPane tab-key="three" label="设置">设置内容</G3TabPane>
+  </G3Tabs>
+</template>

code/g3soft-libs/docs/examples/tabs/type.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// type：line 下划线指示条（默认）/ pill 胶囊；centered 让标签栏居中
+import { ref } from 'vue'
+import { G3Tabs } from '@g3soft/ui'
+
+const line = ref('a')
+const pill = ref('a')
+
+const items = [
+  { key: 'a', label: '全部', content: '全部' },
+  { key: 'b', label: '进行中', content: '进行中' },
+  { key: 'c', label: '已完成', content: '已完成' },
+]
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 20px">
+    <G3Tabs v-model="line" :items="items" centered />
+    <G3Tabs v-model="pill" :items="items" type="pill" />
+  </div>
+</template>