u

code/g3soft-libs/docs/examples/splitter/nested.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// 嵌套：外层左右分栏，右栏内部再上下分栏（经典 IDE 布局）
+import { G3Splitter, G3SplitterPanel } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Splitter style="height: 320px; border: 1px solid #d9d9d9; border-radius: 8px">
+    <G3SplitterPanel :default-size="200">
+      <div class="pane">侧栏（200px）</div>
+    </G3SplitterPanel>
+
+    <G3SplitterPanel>
+      <G3Splitter direction="vertical">
+        <G3SplitterPanel>
+          <div class="pane">编辑区</div>
+        </G3SplitterPanel>
+        <G3SplitterPanel :default-size="120">
+          <div class="pane">输出 / 控制台（120px）</div>
+        </G3SplitterPanel>
+      </G3Splitter>
+    </G3SplitterPanel>
+  </G3Splitter>
+</template>
+
+<style scoped>
+.pane {
+  padding: 16px;
+  font-size: 13px;
+}
+</style>