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