<template>
<div class="main">
<fast-divider vertical transfer :panes="[{ size: 50, min: 30 }, { size: 400 }, {}]" :split-size="10">
<template #divider_0="{ pane, size, index }"><div class="pane p1">纵向分屏, 最小高度30, 拖动传递</div></template>
<template #divider_1="{ pane, size, index }">
<fast-divider :panes="[{ size: 200, min: 100 }, { size: 300, min: 60 }, {}]" :split-size="10" class="pane_container">
<template #divider_0="{ pane, size, index }"><div class="pane p2">横向分屏<br />最小宽度100</div></template>
<template #divider_1="{ pane, size, index }"><div class="pane p2">横向分屏<br />最小宽度60<br />拖动不传递</div></template>
<template #divider_2="{ pane, size, index }"><div class="pane p2">横向分屏<br />没有最小宽度</div></template>
</fast-divider>
</template>
<template #divider_2="{ pane, size, index }">
<div class="pane p1">纵向分屏, 没有最小高度, 拖动传递</div>
</template>
</fast-divider>
</div>
</template>
<script setup>
import 'fast-divider/lib/style.css'
import { FastDivider } from 'fast-divider'
</script>
<style scoped>
.main {
width: 100%;
height: 500px;
margin: 0;
}
.main .pane_container {
width: 100%;
height: 100%;
}
.main .pane {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.main .pane.p1 {
background: lightblue;
}
.main .pane.p2 {
background: lightgreen;
}
</style>