Splitter

Two panes with a divider between them.

import { Splitter } from '@textui/core';

<Splitter direction="row" size="30%">
  <text content="sidebar" />
  <text content="main" />
</Splitter>

Props

| Prop | Type | Default | | | — | — | — | — | | direction | 'row' \| 'column' | 'row' | | | size | number \| ${number}% \| 'auto' | '50%' | Size of the first pane, in cells or percent. | | dividerSize | number | 1 | Cells the divider occupies. 0 hides it. |

Plus everything on BoxProps.

Exactly two children. size applies to the first one and takes a number of cells or a percentage; the second takes what is left. dividerSize is the gap between them in cells.

direction is 'row' for a vertical divide and 'column' for a horizontal one - it names the axis the children are laid along, matching Row and Column rather than the direction the rule is drawn.

See also

• SplitLayout - the same idea for surface mounts
• Row - more than two children, no divider