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 定义一组子项是强制在一行上还是在多行上
Vercel banner