Dockable.BorderContent

Where a border's panel opens, an area sized by the border's size, with the border's splitter on the layout's side.

"The place a border's panel opens: an area sized by the border's size (the engine positions the selected tab's panel over it) and the border's splitter, on the layout's side of it. Hidden while no tab is selected. A docked border sits beside the layout and shrinks it; an overlay border (mode: "overlay") is positioned over the layout's edge, so its stacking (z-index) is yours. Render it from Dockable.Borders's renderContent."

<Dockable.Borders<Types>
    renderBar={renderBar}
    renderContent={(border) => (
        <Dockable.BorderContent
            node={border}
            className="data-overlay:z-20 data-overlay:shadow-xl"
            renderSplitter={(node) => <Dockable.Splitter node={node} aria-label="Resize" className="splitter" />}
        />
    )}
>

Props

BorderContentProps<T> extends the common primitive props.

prop	type	default	description
`node`	`BorderNode<T>`	required	the border
`renderSplitter`	`(border: BorderNode<T>) => ReactNode`	`<Dockable.Splitter node={border} />`	renders the border's splitter
`splitter`	`boolean`	`true`	`false` renders no splitter (the panel keeps its size)

State

BorderContentState, the border's state (also returned by useBorder; Dockable.Border adds its tab direction, which is the strip's alone):

field	type	description
`location`	`"top" \| "bottom" \| "start" \| "end"`	the side of the layout the border is on
`orientation`	`"horizontal" \| "vertical"`	the direction its tabs run: `"vertical"` for a start or end border
`open`	`boolean`	a tab is selected, so the border's panel is open
`overlay`	`boolean`	the panel opens over the layout (`mode: "overlay"`) instead of beside it
`empty`	`boolean`	the border has no tabs
`dropTarget`	`boolean`	the current drag would drop into this border (its strip or its open panel)
`dropRefused`	`boolean`	the current drag is over this border, but a drop rule refuses it

Data attributes

attribute	value
`data-layout-path`	`/border/<location>/content`; the sized area inside is `/border/<location>/area`, the splitter `/border/<location>/s-1`
`data-location`, `data-orientation`, `data-open`, `data-overlay`, `data-docked`, `data-empty`	as on Dockable.Border
`data-dockable-overlay`	on an overlay border: a press inside it does not close the overlay

Structural style

The element: display: flex (a row for start and end borders, a column otherwise) or display: none while closed, flex-shrink: 0. On an overlay border also position: absolute against the layout's edge, on the border's side of the screen (left: 0; top: 0; bottom: 0 for a start border in LTR, right: 0 in RTL, and so on); a start or end overlay stops above and below the open top and bottom overlays (engine.get("overlay-placement-by", { borderId })). An overlay is also pointer-events: none, so presses reach the tab panel positioned over its area; its splitter (Dockable.Splitter of a border is pointer-events: auto) keeps taking them. Hit-testing, not cosmetics.
The area: width, min-width, max-width (start and end) or height, min-height, max-height (top and bottom), from the border's resolved size, minSize and maxSize (model.get("border-settings-by", { borderId }): its own values, else defaults.border).

Overlay borders

An overlay border's panel opens over the layout instead of shrinking it. It closes:

on a press in the layout outside the panel (a tabset, a splitter; not a border strip, and not anything marked data-dockable-overlay);
on keyMap.closeOverlayBorder ("Escape") with focus in the panel or on its tab button; focus goes back to the tab button.

Both run border.configure with open: false through the model's middleware. Turn a border into an overlay with model.run("border.configure", { borderId: "border_start", mode: "overlay" }) (a border without an explicit id gets border_<location>), with mode: "overlay" in its JSON, or for every border with defaults.border.mode.

Props

State

Data attributes

Structural style

Overlay borders

On this page