前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载HStack是 rsuite 基于 Flexbox 封装的水平堆叠组件用于在单行内容纳并排排列的子元素配合VStack、Stack可快速完成组件布局支持自定义间距、分割线与响应式方向切换。阅读本文后你将掌握HStack的完整用法、全部 Props 配置含义以及 rsuite 内部如何通过 CSS 变量与响应式类实现这一布局能力。快速上手HStack 水平堆叠的最小示例本文对应的核心示例docs/pages/components/stack/fragments/horizontal.md展示了 rsuite 官方文档中HStack的最小用法将三个装饰块水平排成一行。import { HStack, Center } from rsuite; const DecorativeBox ({ children, ...rest }) ( Center bgvar(--rs-placeholder) p{40} roundedlg {...rest} {children} /Center ); const App () { return ( HStack DecorativeBox / DecorativeBox / DecorativeBox / /HStack ); }; ReactDOM.render(App /, document.getElementById(root));示例中的Center是 rsuite 的居中容器组件这里用于模拟占位区块bgvar(--rs-placeholder)引用了主题中的占位背景色变量p{40}表示 40px 内边距roundedlg表示大圆角。可以看到HStack的使用极其简单所有直接子元素会被自动沿水平主轴row排列并在交叉轴上居中对齐。与HStack相对的是垂直堆叠的VStack对应示例见 vertical.md二者代码结构完全一致仅组件名不同import { VStack, Center } from rsuite; // 其余代码同上 return ( VStack DecorativeBox / DecorativeBox / DecorativeBox / /VStack );需要说明的是HStack与VStack自 rsuite5.65.0版本起提供更早的版本请直接使用通用的Stack组件见 Stack 文档 中的版本徽标。组件体系Stack / HStack / VStack / Stack.Itemrsuite 的 Stack 家族共包含四个组件导出定义见 src/Stack/index.tsx组件用途Stack通用堆叠组件通过direction自由控制水平或垂直方向HStack专用于水平堆叠direction固定为rowVStack专用于垂直堆叠direction固定为columnStack.Item堆叠子项的布局辅助组件用于单独控制某个子项在交叉轴上的对齐导入方式import { Stack, HStack, VStack } from rsuite;Props 完整参考以下 Props 表格完整继承自官方文档en-US/index.md并补充了源码层面的实现说明。StackStack继承Box组件的全部属性。属性类型(默认值)说明asReact.ElementType自定义根元素标签classPrefixstring (stack)组件 CSS 类前缀directionResponsiveCSSPropertyflexDirection子元素的排列方向支持响应式值dividerReactNode在每个子元素之间插入一个分隔元素wrapboolean子元素是否强制单行还是允许换行到多行HStackHStack继承Stack的属性但固定direction为row。属性类型(默认值)说明alignResponsiveCSSPropertyalignItems (center)子元素在交叉轴上的对齐方式reverseboolean反转子元素的堆叠顺序VStackVStack继承Stack的属性但固定direction为column。属性类型(默认值)说明alignResponsiveCSSPropertyalignItems (flex-start)子元素在交叉轴上的对齐方式dividerReactNode在每个子元素之间插入一个分隔元素reverseboolean反转子元素的堆叠顺序Stack.ItemStack.Item继承Box组件的属性主要通过self属性旧版名称为alignSelf现已被标记为 deprecated单独控制某个子项在交叉轴上的对齐。关于ResponsiveCSSPropertydirection、align等属性的类型均为ResponsiveCSSProperty即它们既可以接收一个普通 CSS 值也可以接收一个按断点xs / sm / md / lg / xl / xxl划分的响应式对象例如Stack direction{{ xs: column, md: row }} Box / Box / /Stack其类型定义与响应式类名的生成规则详见 src/internals/types 中的WithResponsive类型以及样式层responsive-directionmixin见下文源码解析。实战进阶分割线、间距与换行在子元素之间插入分割线dividerdivider属性会在每个子元素之后最后一个子元素除外自动插入分隔元素。官方示例divider.md展示了垂直分割线与水平分割线的组合用法import { HStack, VStack, Center, Divider } from rsuite; const DecorativeBox ({ children, ...rest }) ( Center bgvar(--rs-placeholder) p{40} roundedlg {...rest} {children} /Center ); const App () { return ( VStack divider{Divider /} DecorativeBox / HStack divider{Divider vertical /} h{80} DecorativeBox / DecorativeBox / DecorativeBox / /HStack /VStack ); };外层VStack使用默认的横向Divider分隔垂直堆叠的区块内层HStack通过Divider vertical /在三个水平排列的盒子之间绘制竖线分隔符。divider不限于Divider组件任意ReactNode都可作为分隔元素。通过 spacing 自定义间距Stack的间距通过spacing属性控制底层将其转换为--rs-stack-spacingCSS 变量并作用于 Flexbox 的gap属性。官方示例space.md用Slider实时调节间距值import { VStack, HStack, Slider, Text, Center, Stack } from rsuite; const App () { const [spacing, setSpacing] React.useState(6); return ( VStack spacing{20} HStack wrap Text mutedSpacing/Text Slider value{spacing} w{300} onChange{setSpacing} keepTooltipOpen / /HStack Stack spacing{spacing} DecorativeBox / DecorativeBox / DecorativeBox / DecorativeBox / /Stack /VStack ); };值得注意的是spacing的类型支持number | string | (number | string)[]——传入数组时按「上右下左」的顺序映射为复合间距例如spacing{[10, 20]}等价于 CSS 的gap: 10px 20px。数组会被逐项经getCssValue处理后以空格连接见 src/Stack/utils.ts 中的generateStackCssVars实现。Stack还支持justify与align属性分别映射为justify-content与align-items。换行wrapwrap属性决定子元素是强制单行还是允许换行通过data-wraptrue属性触发flex-wrap: wrap见下方样式源码。当容器宽度不足以容纳所有子元素且设置了wrap时子元素会流动到下一行可配合HStack wrap与按比例拉伸的grow属性实现流式布局wrap.md、grow.md。响应式方向切换Stack的方向支持响应式值这在移动端「竖排、桌面端横排」的典型场景中非常实用。样式层通过断点媒体查询生成rs-stack-{xs|sm|md|lg|xl|xxl}-{row|column|row-reverse|column-reverse}系列类名见 src/Stack/styles/index.scss 的responsive-directionmixin断点变量定义于 src/styles/variables.scss。源码原理HStack 如何基于 Flexbox 实现组件层实现HStack的实现非常精简src/Stack/HStack.tsxconst HStack forwardRefdiv, HStackProps, typeof Subcomponents((props, ref) { const { reverse, ...rest } props; const direction reverse ? row-reverse : row; return Stack {...rest} direction{direction} ref{ref} /; }, Subcomponents);即HStack本质是direction固定为rowreverse时变为row-reverse的StackVStack同理固定为column/column-reversesrc/Stack/VStack.tsx。核心渲染逻辑在 src/Stack/Stack.tsx 中const { withPrefix, merge, responsive } useStyles(classPrefix); const baseClasses merge(className, withPrefix(), ...responsive(direction)); const filteredChildren React.Children.toArray(children); const childCount filteredChildren.length; return ( Box as{as} ref{ref} className{baseClasses}>.rs-stack { display: flex; gap: var(--rs-stack-spacing); flex-wrap: var(--rs-stack-wrap); flex-direction: var(--rs-stack-direction); align-items: var(--rs-stack-align); justify-content: var(--rs-stack-justify); -row { --rs-stack-align: center; // 对应 HStack 默认 aligncenter flex-direction: row; } -column { --rs-stack-align: flex-start; // 对应 VStack 默认 alignflex-start flex-direction: column; } [data-wraptrue] { flex-wrap: wrap; } }Stack的spacing、align、justify属性最终由generateStackCssVarssrc/Stack/utils.ts生成--rs-stack-spacing、--rs-stack-align、--rs-stack-justify等变量再被上述规则消费这也是Stack同时支持数值型间距与响应式对齐值的技术基础。测试佐证仓库为该组件维护了完善的测试用例覆盖HStack、VStack、Stack与Stack.Item的渲染行为以及响应式样式快照见 src/Stack/test 目录可作为二次开发或自定义布局时的行为参考。小结本文以官方示例 horizontal.md 为起点完整覆盖了 rsuiteHStack水平堆叠的快速上手、Stack家族全部 Props、分割线/间距/换行/响应式等进阶用法并深入源码解释了 Flexbox CSS 变量的实现原理。如果你的需求是单行水平排列多个组件直接使用HStack需要垂直排列则用VStack需要自由切换方向时使用Stackdirection。更完整的示例与文档可继续查阅 Stack 官方文档 及其中的全部 fragment 示例。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐acg-faka 的 XSS 防线HTML Purifier 白名单过滤在 PHP 发卡系统中的集成实践acg faka 的 XSS 防线HTML Purifier 白名单过滤在 PHP 发卡系统中的集成实践 HTML Purifier 是一个以「健壮白名单 前端UI组件kube-state-metrics 的 Secret 监控指标全解从 kube_secret_* 到源码实现kube state metrics 的 Secret 监控指标全解从 kube_secret_ 到源码实现 本文基于 kube state metrics前端UI组件如何把 M3U8 课程完整存下来N_m3u8DL-RE 使用指南如何把 M3U8 课程完整存下来N_m3u8DL RE 使用指南 N_m3u8DL RE 是一款跨平台的命令行流媒体下载工具可以把 M3U8HLS、MP前端UI组件上一篇如何在VSCode中安装QQ插件VSCode QQ Extension快速上手指南下一篇CC Switch模型测试功能详解确保AI工具性能的完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考