Dockable.Row
A row (or column) of the layout - flex sized by weight, with splitters between children.
"A row (or column) of the layout. Lays its children out with flex, sized by their weights, calls the child function per child and inserts a splitter between children."
function renderNode(child: TabSetNode | RowNode): ReactNode {
if (child instanceof TabSetNode) return <MyTabSet node={child} />;
return (
<Dockable.Row node={child} renderSplitter={renderSplitter}>
{renderNode}
</Dockable.Row>
);
}
// the root row: no `node`
<Dockable.Row renderSplitter={renderSplitter}>{renderNode}</Dockable.Row>Props
RowProps extends the common primitive props.
| prop | type | default | description |
|---|---|---|---|
node | RowNode | the layout's root row | the row to render; defaults to the root row of the enclosing layout |
children | (child: TabSetNode | RowNode) => ReactNode | required | renders a child: a tabset or a nested row |
renderSplitter | (props: RowSplitterProps) => ReactNode | <Dockable.Splitter /> | renders the splitter between two children (defaults to <Dockable.Splitter />) |
splitter | boolean | true | false renders no splitters |
RowSplitterProps, the argument of renderSplitter:
| field | type | description |
|---|---|---|
node | RowNode | the row the splitter resizes |
index | number | the splitter sits before child index (1-based) |
Spread it on a Dockable.Splitter: (props) => <Dockable.Splitter {...props} className="…" />.
State
RowState:
| field | type | description |
|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal": children side by side; "vertical": stacked |
root | boolean | the layout's root row |
hidden | boolean | a tabset of the layout is maximized outside this row, so the row is hidden (model.isHiddenByMaximize) |
Data attributes
| attribute | value |
|---|---|
data-layout-path | "/row" for the root row, else the row's path (/r1, /r0/r1, …) |
data-orientation | "horizontal" or "vertical" |
data-root | present on the root row |
Structural style
display: flex (none while a tabset maximized outside the row fills the layout), flex-direction (row or column), flex-basis: 0, flex-grow from the
weight (at least 1), min-width/min-height/max-width/max-height from the model,
overflow: hidden. The root row adds position: absolute; inset: 0 to fill the root.
Notes
- A row nested in a row takes the opposite orientation. The model attribute
rootOrientationVerticalmakes the root row a column. - A
Rowwith nonodeinsideDockable.Popoutrenders the window layout's root row. renderSplitterapplies to this row only: pass it to every row (Limitations, gap 6).