Stack
#
Quickly layout components through Flexbox, support vertical and horizontal stacking, support custom spacing and wrap.
Import
#
import { Stack } from 'rsuite';
Props
#
<Stack>
#
| Property |
Type(default) |
Description |
| alignItems |
'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' |
Define the alignment of the children in the stack on the cross axis |
| classPrefix |
string ('stack') |
The prefix of the component CSS class |
| direction |
'row' | 'row-reverse' | 'column' | 'column-reverse' |
The direction of the children in the stack |
| divider |
ReactNode |
Add an element between each child |
| justifyContent |
'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' |
Define the alignment of the children in the stack on the inline axis |
| spacing |
number | string |
Define the spacing between immediate children |
| wrap |
boolean |
Define whether the children in the stack are forced onto one line or can wrap onto multiple lines |
<Stack.Item>
#
| Property |
Type(default) |
Description |
| alignSelf |
'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' |
Define the alignment of the Item in the stack |
| flex |
string | number |
Define the item will grow or shrink to fit the space available in its flex container |
| grow |
string | number |
Define the item grow factor of a flex item main size |
| shrink |
number |
Define the item shrink factor of a flex item |
| basis |
string |
Define the initial main size of the item |
| order |
number |
Define the order of the item in the stack |