Stack 堆叠
通过 Flexbox 对组件进行快速布局,支持垂直和水平方向的堆叠,支持自定义间距和换行。
获取组件
import { Stack } from 'rsuite';
// or
import Stack from 'rsuite/Stack';
演示
默认
分割线
间距
换行
交互
Props
<Stack>
属性名称 | 类型(默认值) |
描述 |
---|---|---|
alignItems | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 定义一组子项在交叉轴上的对齐方式 |
classPrefix | string ('stack') |
组件 CSS 类的前缀 |
direction | 'row' | 'row-reverse' | 'column' | 'column-reverse' | 定义一组子项的方向 |
divider | ReactNode | 为每一个子项直接添加分隔符 |
justifyContent | 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 定义一组子项在主轴上的对齐方式 |
spacing | number, string | 为每一个子项直接设置间距 |
wrap | boolean | 定义一组子项是强制在一行上还是在多行上 |