Column
A vertical flex container.
import { Column } from '@textui/core';
<Column gap={1} flex={1}>
<text content="one" />
<text content="two" />
</Column>
Props
| Prop | Type | Default | |
| — | — | — | — |
| children | unknown | | |
| title | string | | Header text drawn into the top border. Needs a border to land on. |
| titleAlign | 'left' \| 'center' \| 'right' | | |
| footer | string | | Footer text drawn into the bottom border. |
| footerAlign | 'left' \| 'center' \| 'right' | | |
| scrollTop | number | | Scroll offset in cells, when overflow is ‘scroll’. |
| scrollLeft | number | | |
Plus everything on BaseProps.
Downwards is the axis that clips. Where a row narrows its children, a column keeps their height and cuts the overflow - because a panel below the fold is still readable and a panel with no bottom border is not.
Give exactly one child flex={1} to make it absorb the leftover height; that
is how a header, a body and a status bar divide a screen.
See also
- Row - the same thing, horizontally
- Stack - a column whose spacing comes from the theme
- ScrollView - when the content is taller than the space