Splitter

1<script setup lang="ts">2import { Splitter, SplitterPanel, type SplitterResizeEvent } from '@vitral/vue';3import { ref } from 'vue';4 5const sizes = ref([25, 50, 25]);6const ended = ref<number[] | null>(null);7const show = (value: number | undefined) => `${Math.round(value ?? 0)}%`;8const onResize = (event: SplitterResizeEvent) => (sizes.value = event.sizes);9</script>10 11<template>12    <Splitter class="demo-splitter" @resize="onResize" @resizeend="ended = $event.sizes">13        <SplitterPanel :size="25" :min-size="10"><div class="cell c1">{{ show(sizes[0]) }}</div></SplitterPanel>14        <SplitterPanel :size="50" :min-size="10"><div class="cell c2">{{ show(sizes[1]) }}</div></SplitterPanel>15        <SplitterPanel :size="25" :min-size="10"><div class="cell c3">{{ show(sizes[2]) }}</div></SplitterPanel>16    </Splitter>17    <small style="color: var(--vt-text-muted-color)">resizeend: {{ ended ? ended.map((s) => show(s)).join(' · ') : '—' }}</small>18</template>19 20<style scoped>21.demo-splitter {22    width: 100%;23    height: 12rem;24}25 26.cell {27    --c: var(--vt-chart-1);28    display: flex;29    align-items: center;30    justify-content: center;31    height: 100%;32    font-size: 0.8125rem;33    font-weight: 600;34    color: var(--vt-text-color);35    background: color-mix(in srgb, var(--c) 14%, transparent);36}37 38.c1 {39    --c: var(--vt-chart-1);40}41.c2 {42    --c: var(--vt-chart-2);43}44.c3 {45    --c: var(--vt-chart-3);46}47</style>

1<script setup lang="ts">2import { Splitter, SplitterPanel } from '@vitral/vue';3</script>4 5<template>6    <Splitter class="demo-splitter" layout="vertical" :gutter-size="6">7        <SplitterPanel :size="40"><div class="cell c4">top</div></SplitterPanel>8        <SplitterPanel :min-size="20"><div class="cell c5">bottom (min-size 20)</div></SplitterPanel>9    </Splitter>10</template>11 12<style scoped>13.demo-splitter {14    width: 100%;15    height: 18rem;16}17 18.cell {19    --c: var(--vt-chart-1);20    display: flex;21    align-items: center;22    justify-content: center;23    height: 100%;24    font-size: 0.8125rem;25    font-weight: 600;26    color: var(--vt-text-color);27    background: color-mix(in srgb, var(--c) 14%, transparent);28}29 30.c4 {31    --c: var(--vt-chart-4);32}33.c5 {34    --c: var(--vt-chart-5);35}36</style>

1<script setup lang="ts">2import { Splitter, SplitterPanel } from '@vitral/vue';3</script>4 5<template>6    <Splitter class="demo-splitter">7        <SplitterPanel :size="28" :min-size="15"><div class="cell c2">explorer</div></SplitterPanel>8        <SplitterPanel>9            <Splitter layout="vertical">10                <SplitterPanel :size="65"><div class="cell c1">editor</div></SplitterPanel>11                <SplitterPanel><div class="cell c3">terminal</div></SplitterPanel>12            </Splitter>13        </SplitterPanel>14    </Splitter>15</template>16 17<style scoped>18.demo-splitter {19    width: 100%;20    height: 18rem;21}22 23.cell {24    --c: var(--vt-chart-1);25    display: flex;26    align-items: center;27    justify-content: center;28    height: 100%;29    font-size: 0.8125rem;30    font-weight: 600;31    color: var(--vt-text-color);32    background: color-mix(in srgb, var(--c) 14%, transparent);33}34 35.c1 {36    --c: var(--vt-chart-1);37}38.c2 {39    --c: var(--vt-chart-2);40}41.c3 {42    --c: var(--vt-chart-3);43}44</style>