skycurtain/splitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
skycurtain 2025-03-24 14:44:59 +08:00
parent 34833f6ae6
commit 3b690b03a7
4 changed files with 41 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/App.vue
View File

@ -1,79 +1,79 @@
<script setup lang="ts"> <script setup lang="ts">
import { Splitter, Pane } from './components' import { SplitLayout, SplitPanel } from './components'
</script> </script>
<template> <template>
<div class="container"> <div class="container">
<h1>Splitter 组件示例</h1> <h1>SplitLayout 组件示例</h1>
<h2>水平分割</h2> <h2>水平分割</h2>
<div class="demo-box"> <div class="demo-box">
<Splitter direction="horizontal"> <SplitLayout direction="horizontal">
<Pane :size="30" :min-size="100"> <SplitPanel :size="30" :min-size="100">
<div class="pane-content"> <div class="SplitPanel-content">
<h3>左侧面板</h3> <h3>左侧面板</h3>
<p>这是左侧面板的内容，初始宽度为30%，最小宽度为100px</p> <p>这是左侧面板的内容，初始宽度为30%，最小宽度为100px</p>
</div> </div>
</Pane> </SplitPanel>
<Pane> <SplitPanel>
<div class="pane-content"> <div class="SplitPanel-content">
<h3>中间面板</h3> <h3>中间面板</h3>
<p>这是中间面板的内容，宽度自动分配</p> <p>这是中间面板的内容，宽度自动分配</p>
</div> </div>
</Pane> </SplitPanel>
<Pane :size="30"> <SplitPanel :size="30">
<div class="pane-content"> <div class="SplitPanel-content">
<h3>右侧面板</h3> <h3>右侧面板</h3>
<p>这是右侧面板的内容，初始宽度为30%</p> <p>这是右侧面板的内容，初始宽度为30%</p>
</div> </div>
</Pane> </SplitPanel>
</Splitter> </SplitLayout>
</div> </div>
<h2>垂直分割</h2> <h2>垂直分割</h2>
<div class="demo-box"> <div class="demo-box">
<Splitter direction="vertical"> <SplitLayout direction="vertical">
<Pane :size="40"> <SplitPanel :size="40">
<div class="pane-content"> <div class="SplitPanel-content">
<h3>上方面板</h3> <h3>上方面板</h3>
<p>这是上方面板的内容，初始高度为40%</p> <p>这是上方面板的内容，初始高度为40%</p>
</div> </div>
</Pane> </SplitPanel>
<Pane> <SplitPanel>
<div class="pane-content"> <div class="SplitPanel-content">
<h3>下方面板</h3> <h3>下方面板</h3>
<p>这是下方面板的内容，高度自动分配</p> <p>这是下方面板的内容，高度自动分配</p>
</div> </div>
</Pane> </SplitPanel>
</Splitter> </SplitLayout>
</div> </div>
<h2>嵌套分割</h2> <h2>嵌套分割</h2>
<div class="demo-box"> <div class="demo-box">
<Splitter direction="horizontal"> <SplitLayout direction="horizontal">
<Pane :size="30"> <SplitPanel :size="30">
<div class="pane-content"> <div class="SplitPanel-content">
<h3>左侧面板</h3> <h3>左侧面板</h3>
<p>这是左侧面板的内容</p> <p>这是左侧面板的内容</p>
</div> </div>
</Pane> </SplitPanel>
<Pane :size="70"> <SplitPanel :size="70">
<Splitter direction="vertical"> <SplitLayout direction="vertical">
<Pane :size="50"> <SplitPanel :size="50">
<div class="pane-content"> <div class="SplitPanel-content">
<h3>右上面板</h3> <h3>右上面板</h3>
<p>这是右上面板的内容</p> <p>这是右上面板的内容</p>
</div> </div>
</Pane> </SplitPanel>
<Pane :size="50"> <SplitPanel :size="50">
<div class="pane-content"> <div class="SplitPanel-content">
<h3>右下面板</h3> <h3>右下面板</h3>
<p>这是右下面板的内容</p> <p>这是右下面板的内容</p>
</div> </div>
</Pane> </SplitPanel>
</Splitter> </SplitLayout>
</Pane> </SplitPanel>
</Splitter> </SplitLayout>
</div> </div>
</div> </div>
</template> </template>
@ -102,14 +102,14 @@ h2 {
margin-bottom: 30px; margin-bottom: 30px;
} }
.pane-content { .SplitPanel-content {
padding: 16px; padding: 16px;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.pane-content h3 { .SplitPanel-content h3 {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;
color: #1890ff; color: #1890ff;

0
src/components/Splitter.vue → src/components/SplitLayout.vue
View File

0
src/components/Pane.vue → src/components/SplitPanel.vue
View File

7
src/components/index.ts
View File

@ -1,5 +1,4 @@
import Splitter from './Splitter.vue' import SplitLayout from './SplitLayout.vue'
import Pane from './Pane.vue' import SplitPanel from './SplitPanel.vue'
export { Splitter, Pane } export { SplitLayout, SplitPanel }
export default { Splitter, Pane }