31 lines
824 B
Vue
31 lines
824 B
Vue
<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>
|