Layout

DockPanel

Docks regions to its top, bottom, left and right edges and gives what is left to the fill; the order decides who wins the corners.

WAI-ARIA tested

Import

main.ts

import { DockPanel } from '@vitral/vue';

An application frame

A toolbar, a status bar, a file tree and a properties pane around an editor.

top — toolbar

left — files

fill — the editor

right — properties

bottom — status bar

1<script setup lang="ts">2import { DockPanel, Label, Select, StackPanel } from '@vitral/vue';3import { reactive, ref } from 'vue';4 5const orders = [6    { label: 'Top & bottom first (default)', value: 'top,bottom,left,right' },7    { label: 'Left & right first', value: 'left,right,top,bottom' },8    { label: 'Top, left, bottom, right', value: 'top,left,bottom,right' },9    { label: 'Left, top, right, bottom', value: 'left,top,right,bottom' }10];11const order = ref(orders[0]!.value);12const edges = reactive({ top: true, bottom: true, left: true, right: true });13const spacing = ref(false);14</script>15 16<template>17    <div class="controls">18        <StackPanel spacing="0.375rem" style="min-width: 16rem">19            <Label for="dp-order">Dock order</Label>20            <Select id="dp-order" v-model="order" :options="orders" option-label="label" option-value="value" size="small" />21        </StackPanel>22        <fieldset class="edges">23            <legend>Edges</legend>24            <label v-for="(on, edge) in edges" :key="edge"><input v-model="edges[edge]" type="checkbox" /> {{ edge }}</label>25            <label><input v-model="spacing" type="checkbox" /> spacing</label>26        </fieldset>27    </div>28    <DockPanel class="frame" :dock-order="order" :spacing="spacing ? 6 : undefined">29        <template v-if="edges.top" #top><div class="box c1">top — toolbar</div></template>30        <template v-if="edges.bottom" #bottom><div class="box c4">bottom — status bar</div></template>31        <template v-if="edges.left" #left><div class="box c2 side">left — files</div></template>32        <template v-if="edges.right" #right><div class="box c5 side">right — properties</div></template>33        <div class="box c3 fill">fill — the editor</div>34    </DockPanel>35</template>36 37<style scoped>38.controls {39    display: flex;40    flex-wrap: wrap;41    align-items: flex-end;42    gap: 1rem;43    width: 100%;44}45 46.edges {47    display: flex;48    gap: 0.75rem;49    margin: 0;50    padding: 0.25rem 0.75rem 0.5rem;51    font-size: 0.8125rem;52    border: 1px solid var(--vt-content-border-color);53    border-radius: var(--vt-border-radius-md);54}55 56.edges legend {57    padding: 0 0.25rem;58    font-weight: 500;59}60 61.edges label {62    display: inline-flex;63    align-items: center;64    gap: 0.25rem;65}66 67.frame {68    width: 100%;69    height: 20rem;70    border: 1px dashed color-mix(in srgb, var(--vt-text-color) 30%, transparent);71    border-radius: var(--vt-border-radius-md);72    overflow: hidden;73}74 75.box {76    --c: var(--vt-chart-1);77    box-sizing: border-box;78    height: 100%;79    padding: 0.5rem 0.75rem;80    font-size: 0.8125rem;81    color: var(--vt-text-color);82    background: color-mix(in srgb, var(--c) 18%, transparent);83    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);84}85 86.side {87    width: 10rem;88}89 90.fill {91    display: flex;92    align-items: center;93    justify-content: center;94    font-weight: 600;95}96 97.c1 {98    --c: var(--vt-chart-1);99}100.c2 {101    --c: var(--vt-chart-2);102}103.c3 {104    --c: var(--vt-chart-3);105}106.c4 {107    --c: var(--vt-chart-4);108}109.c5 {110    --c: var(--vt-chart-5);111}112</style>

Only what is there

Just a left slot and the fill: no tracks, and no gaps, for the edges that are absent.

left

fill

1<script setup lang="ts">2import { DockPanel } from '@vitral/vue';3</script>4 5<template>6    <DockPanel class="frame" :spacing="8">7        <template #left><div class="box c2 side">left</div></template>8        <div class="box c3 fill">fill</div>9    </DockPanel>10</template>11 12<style scoped>13.frame {14    width: 100%;15    height: 8rem;16    padding: 0.5rem;17    border: 1px dashed color-mix(in srgb, var(--vt-text-color) 30%, transparent);18    border-radius: var(--vt-border-radius-md);19    overflow: hidden;20}21 22.box {23    --c: var(--vt-chart-1);24    box-sizing: border-box;25    height: 100%;26    padding: 0.5rem 0.75rem;27    font-size: 0.8125rem;28    color: var(--vt-text-color);29    background: color-mix(in srgb, var(--c) 18%, transparent);30    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);31}32 33.side {34    width: 10rem;35}36 37.fill {38    display: flex;39    align-items: center;40    justify-content: center;41    font-weight: 600;42}43 44.c2 {45    --c: var(--vt-chart-2);46}47.c3 {48    --c: var(--vt-chart-3);49}50</style>

API

Read from packages/vue/src/components/DockPanel/types.ts, so it says what the component actually accepts.

Props

Name	Type	Description
dockOrder	string \| ('top' \| 'bottom' \| 'left' \| 'right')[]	The order the edges dock in. Each edge takes a full strip of the space still free, so the earlier edges win the corners. The default, `['top', 'bottom', 'left', 'right']`, has top and bottom span the full width; put `left`/`right` first for full-height sides. An array or a list such as `'left,right'`; edges left out follow in the default order.
spacing	number \| string	Space between the docked regions and the fill. Defaults to the `dockpanel.spacing` token.
as	string \| Component	—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Slots

Name	Slot props	Description
top	—	—
bottom	—	—
left	—	—
right	—	—
default	—	The fill: what the docked edges leave.

DockPanel

Import

API

Props

Slots

Related components