Dockable.Borders

"The frame that places the borders around the main layout, as FlexLayout does: the top and bottom strips span the full width, the start and end strips sit between them, and each border's panel area sits between its strip and the layout. Renders only structural flex. Place it directly in Dockable.Root instead of the root Dockable.Row, and pass the row as its child."

Pass the model's registry as the type argument (<Dockable.Borders<Types>>): renderBar and renderContent then receive typed BorderNode<Types> nodes (their data is Types["border"]).

<Dockable.Root model={model}>
    <Dockable.Borders<Types>
        renderBar={(border) => (
            <Dockable.Border node={border} className="bar">
                <Dockable.TabList<Types> aria-label={`${border.location} panels`}>
                    {(tab) => <Dockable.Tab node={tab}>{tab.label}</Dockable.Tab>}
                </Dockable.TabList>
            </Dockable.Border>
        )}
    >
        <Dockable.Row<Types>>{renderNode}</Dockable.Row>
    </Dockable.Borders>
    <Dockable.Panels<Types>>{(tab) => <Dockable.Panel node={tab}>{content(tab)}</Dockable.Panel>}</Dockable.Panels>
</Dockable.Root>

Borders come from the model's state (model.get("borders"), declared in the layout JSON's borders; see JSON model). See the Borders guide.

Props

BordersProps<T> extends the common primitive props.

State

BordersState:

Which borders show

A border shows when its resolved show is on (model.get("border-settings-by", { borderId })?.show) and, if it autoHides (its own autoHide, else defaults.border.autoHide), when it has tabs or a drag reveals it: while a tab is dragged near the edge of the layout that has an empty auto-hide border (within defaults.layout.edgeDockMargin, away from the edge docking bands), that border appears so it can take the drop. It hides again when the drag ends. Borders only render in the main layout, never in a popout window. The engine decides: Dockable.Borders renders the borders engine.is("border-shown", { borderId }) answers true for.

Data attributes

Structural style

The frame fills the root (position: absolute; inset: 0) as a flex column. Its inner elements are flex rows and columns (flex-grow: 1, min-width/min-height: 0); /borders/inner and /borders/center are position: relative (overlay borders are positioned in them), and so is /main, which the root row fills.