Stack 堆叠

通过 Flexbox 对组件进行快速布局，支持垂直和水平方向的堆叠，支持自定义间距和换行。

获取组件

MainIndividual
import { Stack, HStack, VStack } from 'rsuite';
  • Stack 用于水平或垂直堆叠元素。
  • HStack 用于水平堆叠元素。Version 5.65.0 or above
  • VStack 用于垂直堆叠元素。Version 5.65.0 or above

演示

水平

垂直

分割线

间距

换行

交互

子项对齐

子项拉伸

响应式

Props

<Stack>

继承 Box 组件的属性

属性名称 类型 (默认值) 描述
as ElementType 自定义根元素
classPrefix string ('stack') 组件 CSS 类的前缀
direction ResponsiveCSSProperty<'flexDirection'> 定义一组子项的方向, 支持响应式值
divider ReactNode 为每一个子项直接添加分隔符
wrap boolean 定义一组子项是强制在一行上还是在多行上

<HStack>

继承 Stack 组件的属性

属性名称 类型 (默认值) 描述
align ResponsiveCSSProperty<'alignItems'> ('center') 定义一组子项在交叉轴上的对齐方式
reverse boolean 反转一组子项在堆叠中的顺序

<VStack>

继承 Stack 组件的属性

属性名称 类型 (默认值) 描述
align ResponsiveCSSProperty<'alignItems'> ('flex-start') 定义一组子项在交叉轴上的对齐方式
divider ReactNode 为每一个子项直接添加分隔符
reverse boolean 反转一组子项在堆叠中的顺序

<Stack.Item>

继承 Box 组件的属性

类型定义

ResponsiveCSSProperty 

import { CSSProperties } from 'react';

type ResponsiveValue<T> = {
  xs?: T; // Extra small devices (portrait phones, <576px)
  sm?: T; // Small devices (landscape phones, ≥576px)
  md?: T; // Medium devices (tablets, ≥768px)
  lg?: T; // Large devices (desktops, ≥992px)
  xl?: T; // Extra large devices (large desktops, ≥1200px)
  xxl?: T; // Extra extra large devices (larger desktops, ≥1400px)
};

type WithResponsive<T> = T | ResponsiveValue<T>;

type ResponsiveCSSProperty<T> = WithResponsive<CSSProperties[T]>;