Dock layout

Basic usage

The layout is declared as a tree of DockGroup nodes: each group either has children (further splits) or panels (a tabbed area). Content is provided through the named slot panel-{id} (Vue) / slots["panel-{id}"] (React).

// orders.ts
export const fetchOrders = () => …

$ pnpm dev
[vite] dev server running on :5173

<CfDockLayout :layout="layout">
<template #panel-orders>… orders.ts content …</template>
<template #panel-login>… login.ts content …</template>
<template #panel-terminal>… terminal content …</template>
</CfDockLayout>

<CfDockLayout layout={layout} slots={{
'panel-orders': <pre>orders.ts</pre>,
'panel-login': <pre>login.ts</pre>,
'panel-terminal': <Terminal />,
}} />

Minimal layout (no nesting)

A single group with multiple panels = a plain tabbed view, equivalent to CfTabs. If you only need tab switching, use CfTabs directly — it’s lighter.

<CfDockLayout :layout="{ id: 'r', orientation: 'vertical', panels: [...] }" />

<CfDockLayout layout={{ id: "r", orientation: "vertical", panels: [...] }} />

API

DockGroup: { id, orientation: 'horizontal' \| 'vertical', children?: DockGroup[], panels?: DockPanel[], size? }

DockPanel: { id, title, contentKey?, closable?, detachable?, size?, collapsed? }

Events: active-change(groupId, panelId) / panel-close(...) / panel-detach(...).

v1 limitations: splitter resize and drag-to-rearrange are not yet supported; planned for v2.