u

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>