RSuite Divider 分割线组件完全指南：水平/垂直分割、标签、外观与尺寸详解

发布时间：2026/10/2 9:09:09

RSuite Divider 分割线组件完全指南：水平/垂直分割、标签、外观与尺寸详解
前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载导读RSuitersuite是一款开源的 React 组件库Divider分割线是其中用于将内容在水平或垂直方向上进行视觉分组的轻量级组件。本文以官方中文文档 docs/pages/components/divider/zh-CN/index.md 为骨架结合组件源码、样式实现与测试用例系统讲解 Divider 的获取方式、全部 API 属性、六种典型使用场景默认、带标签、外观、尺寸、颜色、垂直以及其底层基于 CSS 变量和data-*属性的实现原理。读完本文你将能够熟练运用 Divider 构建信息分组清晰、样式可定制的高质量界面。组件简介Divider 的作用是分隔线用于将内容水平或垂直分组。它本质上是一个语义化的分隔元素渲染为roleseparator可以以水平方式分隔上下区块如卡片内的段落、表单区块以垂直方式在行内分隔相邻元素如工具栏按钮组、导航项之间支持在分割线上承载文字标签或任意 React 组件如按钮、图标并可控制标签位置支持三种外观实线、虚线、点线、多级尺寸与间距、以及颜色定制。从源码看Divider.tsx 内部基于StyledBox渲染并向外暴露data-appearance、data-orientation、data-with-label、data-placement等数据属性样式层据此切换形态详见 styles/index.scss。获取组件Divider 是 RSuite 的标准组件安装 RSuite 后即可从主包导入使用npm install rsuiteimport { Divider } from rsuite;如果项目使用按需加载可单独导入该组件模块。官方文档中所有演示示例均基于上述导入方式例如与Placeholder、Button、HStack等组件组合使用。基础用法默认分割线最基础的使用方式是在两段内容之间直接放置Divider /。官方演示basic.md如下import { Divider, Placeholder } from rsuite; const App () ( Placeholder.Paragraph typemedia / Divider spacingmd / Placeholder.Paragraph typemedia / / ); ReactDOM.render(App /, document.getElementById(root));水平分割线默认占满容器宽度width: 100%上下自动应用间距margin-block: var(--rs-divider-spacing)。示例中spacingmd用于控制分割线与上下内容之间的留白实际渲染时该值会换算为 CSS 间距变量见下文间距说明。带标签的分割线Divider 支持在分割线中间或左右插入标签内容这是最常用的增强形态。官方演示with-label.mdimport { Divider, Placeholder, Button } from rsuite; const App () ( Divider spacingmd labelLabel (start) labelPlacementstart / Divider spacingmd labelLabel (center) labelPlacementcenter / Divider spacingmd labelLabel (end) labelPlacementend / Divider spacingmd label{ButtonButton/Button} / / ); ReactDOM.render(App /, document.getElementById(root));关键点label属性接受ReactNode因此不仅可以是纯文本也可以是任何组件——示例中直接放了一个Button。源码中label childrenDivider.tsx也就是说如果你用Divider文本/Divider这种子元素写法子内容会自动作为标签渲染。labelPlacement控制标签位置取值start | center | end。源码会据此输出data-placement属性Divider.tsx样式层通过隐藏对应一侧的伪元素来达到标签贴左 / 居中 / 贴右的效果data-placementstart时隐藏::before左侧线段消失data-placementend时隐藏::after右侧线段消失不传或传center时左右线段对称见 styles/index.scss。测试用例也验证了这一行为Divider.spec.tsx渲染labelStart时元素带data-placementstart默认居中时则不带data-placement属性。外观appearance实线 / 虚线 / 点线appearance属性决定分割线的线条样式取值solid | dashed | dotted默认solid。官方演示appearance.mdimport { Divider } from rsuite; const App () ( Divider spacingmd labelSolid(default) / Divider spacingmd appearancedashed labelDashed / Divider spacingmd appearancedotted labelDotted / / ); ReactDOM.render(App /, document.getElementById(root));实现原理源码将appearance映射为data-appearance数据属性Divider.tsx样式层通过:where([data-appearancedashed])与:where([data-appearancedotted])改写 CSS 变量--rs-divider-border-stylestyles/index.scss从而复用同一套边框渲染逻辑。测试覆盖了 dashed/dotted 两种外观的渲染Divider.spec.tsx。尺寸size与间距spacing尺寸控制线条粗细size控制分割线本身的粗细接受语义化预设值xs | sm | md | lg也接受任意number或string如6、0.5rem。官方演示size.mdimport { Divider } from rsuite; const App () ( Divider sizexs labelxs / Divider sizesm labelsm / Divider sizemd labelmd / Divider sizelg labellg / Divider size{6} label{6} / Divider size0.5rem label0.5rem / / ); ReactDOM.render(App /, document.getElementById(root));从样式源码styles/index.scss可以看到预设值的实际换算关系基于主题缩放变量--rs-scale可随主题密度整体缩放sizeCSS 变量计算值xs--rs-divider-size-xs0.0625rem * --rs-scale1pxsm--rs-divider-size-sm0.125rem * --rs-scale2pxmd--rs-divider-size-md0.1875rem * --rs-scale3pxlg--rs-divider-size-lg0.25rem * --rs-scale4pxxl--rs-divider-size-xl0.3125rem * --rs-scale5px注TypeScript 类型中size实际包含xl这一档垂直分割线示例即使用了sizexl但官方 Props 表仅列出xs | sm | md | lg若传入number/string组件会将其作为内联样式直接应用。测试用例Divider.spec.tsx验证了 xs/sm/md/lg/xl 全部五档尺寸均能正常渲染。间距控制与内容的距离spacing控制分割线与周围内容之间的空白取值同样是xs | sm | md | lg或number | string。源码通过getSizeStyle(spacing, divider, spacing)将间距值注入样式Divider.tsx底层换算为spacingCSS 变量计算值xs--rs-divider-spacing-xsvar(--rs-spacing) * 2sm--rs-divider-spacing-smvar(--rs-spacing) * 3md--rs-divider-spacing-mdvar(--rs-spacing) * 4lg--rs-divider-spacing-lgvar(--rs-spacing) * 5xl--rs-divider-spacing-xlvar(--rs-spacing) * 6见 styles/index.scss。对水平分割线该值应用于上下外边距对垂直分割线则应用于左右外边距margin-inline。颜色colorcolor用于定制分割线颜色接受 RSuite 内置命名颜色red、orange、yellow、green、cyan、blue、violet等或任意 CSS 颜色字符串。官方演示color.mdimport { Divider } from rsuite; const App () ( Divider colorred labelRed / Divider colororange labelOrange / Divider coloryellow labelYellow / Divider colorgreen labelGreen / Divider colorcyan labelCyan / Divider colorblue labelBlue / Divider colorviolet labelViolet / Divider color#000 labelCustom Color / / ); ReactDOM.render(App /, document.getElementById(root));实现上组件将颜色映射到 CSS 变量--rs-divider-color样式默认--rs-divider-border-color: var(--rs-divider-color, var(--rs-divider-border))即未指定颜色时自动沿用主题的分割线边框色指定后则使用自定义颜色styles/index.scss。测试用例同样覆盖了 red/green/blue/yellow/violet 等命名色的渲染Divider.spec.tsx。垂直分割线verticalvertical属性将分割线转为垂直方向用于在同一行中分隔相邻内容。官方演示vertical.md使用HStack横向布局在各项之间插入垂直分割线import { Divider, Button, HStack } from rsuite; const App () ( HStack spacing{0} Divider vertical sizexs / labelXsmall/label Divider vertical sizesm / labelSmall/label Divider vertical sizemd / labelMedium/label Divider vertical sizelg / labelLarge/label Divider vertical sizexl / labelExtra Large/label /HStack ); ReactDOM.render(App /, document.getElementById(root));注意两点垂直分割线不能与标签同时使用——Props 表中明确标注vertical垂直分割线不能与标签同时使用。样式层面带标签的分割线走的是flex布局 伪元素线段方案与垂直形态的inline-block布局互斥。垂直形态由data-orientationvertical触发源码 Divider.tsx样式为display: inline-block; height: 100%; width: 1px; border-inline-start-width: var(--rs-divider-size)styles/index.scss即实际以左边框呈现竖向线段高度自动撑满所在行高。测试用例验证了vertical会输出data-orientationvertical属性Divider.spec.tsx。Props 总览以下为官方文档 Props 表index.md与源码类型定义Divider.tsx的完整对照属性名称类型描述版本appearancesolid \| dashed \| dotted分割线的外观样式实线/虚线/点线—asElementType默认div自定义元素类型可将分割线渲染为其他语义标签—classPrefixstring默认divider组件 CSS 类的前缀—colorColor \| CSSProperties[color]分割线的颜色支持命名色或任意 CSS 颜色—labelReactNode标签内容可以是文本或任意组件6.0.0labelPlacementstart \| center \| end标签位置左/中/右6.0.0sizexs \| sm \| md \| lg \| number \| string分割线的粗细尺寸—spacingxs \| sm \| md \| lg \| number \| string分割线与内容之间的间距—verticalboolean垂直分割线不能与标签同时使用—补充说明label与labelPlacement均为 6.0.0 版本新增源码中以version 6.0.0标注Divider.tsx。组件还继承了BoxProps即StyledBox的通用属性支持标准 DOM 属性、className、style、ref等透传ref将指向底层div元素。从源码看Divider 内部使用useCustom(Divider, props)获取带默认值的属性classPrefix默认divider并通过useStyles生成rs-divider根类名。无障碍与语义化Divider 渲染为roleseparatorDivider.tsx这是 WAI-ARIA 中用于分隔并区分内容节或段落的语义角色。测试用例明确断言Should render a Divider时元素带rs-divider类且具备separator角色Divider.spec.tsx这保证了屏幕阅读器等辅助技术能够正确识别分割线的语义而无障碍友好。典型组合场景小结结合官方示例与源码Divider 的常用组合模式可归纳为区块分隔Divider /spacingmd用于段落、卡片区块之间的视觉隔离带标题分组Divider label分组标题 /或自定义labelPlacement在长内容中插入带标题的分隔带工具栏竖线HStackDivider vertical sizesm /在按钮组、操作项之间插入竖向分隔视觉强调appearancedashedcolorblue组合使用区分普通分隔与强调分隔。需要进一步研究细节时可查阅 组件源码、样式实现、测试用例 以及官方文档的 英文版 和各演示片段fragments 目录。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐Ant Design Divider 垂直分割线完整指南orientationvertical 与 vertical 用法详解Ant Design Divider 垂直分割线完整指南 orientationvertical 与 vertical 用法详解 导读 在 Ant De前端UI组件设计系统RSuite Button 组件完全指南外观、尺寸、颜色、图标与加载状态RSuite Button 组件完全指南外观、尺寸、颜色、图标与加载状态 RSuite 的 Button 是整套组件库中最基础的操作元素也是表单提交、工具栏前端UI组件DaisyUI Divider 组件完全指南垂直/水平分隔线的类名体系与底层实现DaisyUI Divider 组件完全指南垂直/水平分隔线的类名体系与底层实现 Divider 是 DaisyUI 中用于在垂直或水平方向上分隔内容的轻量组前端UI组件上一篇解决HMCL Java路径错误JDK安装位置检测与修复下一篇Simple Form资源加载优化减少HTTP请求创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

相关新闻

搞定wordpress镇企源码下载，备案避坑指南

搞定wordpress镇企源码下载，备案避坑指南

搞定wordpress镇企源码下载，备案避坑指南 备案流程一头雾水？别急，很多设计师转前端的朋友在接wordpress镇企这类项目时，最头疼的不是代码，而是那些看不懂的备案条款和服务器配置。我去年帮一家做农业物联网的初创公司做官网，客户拿着…

2026/10/1 18:42:53 阅读更多 →
3个实战案例解析wordpress爱奇艺插件下载防坑指南

3个实战案例解析wordpress爱奇艺插件下载防坑指南

3个实战案例解析wordpress爱奇艺插件下载防坑指南 找建站公司怕被坑高价？这大概是无数中小企业主和刚入行做网站新手的噩梦。我见过太多人花了几万块，最后拿到的只是一个套皮严重的模板站，连个像样的视频展示功能都搞不定，更别提那些花里胡哨的…

2026/10/1 8:05:29 阅读更多 →
5类劳动节网页设计素材安全坑，新手建站怎么选才不踩雷

5类劳动节网页设计素材安全坑，新手建站怎么选才不踩雷

5类劳动节网页设计素材安全坑，新手建站怎么选才不踩雷 不会代码想做网站，最怕的不是设计丑，而是素材带毒。劳动节网页设计素材怎么选，直接决定你的站点是流量入口还是黑客温床。很多运营人员手里攥着精美的五一劳动节网页设计素材，往后台一传，页面倒是…

2026/10/1 18:43:02 阅读更多 →

最新新闻

ACPI六大状态解析：G/S/C/P/T/D与系统电源管理

ACPI六大状态解析：G/S/C/P/T/D与系统电源管理

做过几年固件和操作系统底层的人，基本都绕不开ACPI这几个字母。ACPI（Advanced Configuration and Power Interface）里的state概念，说白了就是一套全系统电源管理的“状态机”，从整个电脑是开机还是关机，到C…

2026/10/2 22:54:11 阅读更多 →
AI应用底座QuickBlue：从模型网关到Agent编排的企业级中间层

AI应用底座QuickBlue：从模型网关到Agent编排的企业级中间层

团队里最近频繁有人问我同一个问题：QuickBlue 到底是什么，为什么这半年大家突然都在聊“AI 应用底座”？尤其是在我们自己内部做技术选型、帮客户规划 Agent 落地的时候，“底座”这个词出现的频率高到让人不得不重视。今天这篇就围…

2026/10/2 22:54:10 阅读更多 →
RF-Adaboost多源工业数据融合分类实战

RF-Adaboost多源工业数据融合分类实战

简介：本资源是一份面向机器学习从业者与进阶初学者的Python集成学习实战项目，聚焦随机森林与AdaBoost融合建模，解决多输入、高噪声场景下的复杂分类任务，尤其适用于金融风控、医疗诊断等对鲁棒性与可解释性要求较高的领域。压缩包…

2026/10/2 22:54:10 阅读更多 →
下班后9小时搞定AI漫剧：从文案到成片的完整实战记录

下班后9小时搞定AI漫剧：从文案到成片的完整实战记录

下班路上刷到一条AI漫剧的热榜，说实话我盯了很久了。这阵子“AI漫剧”“AI短剧”确实有点泛滥，从3分钟反转小剧场到连载条漫动画到处都能刷到，但绝大多数都是专业团队在秀肌肉，动不动就是几十人的AI工作流，普通人看了根…

2026/10/2 22:54:10 阅读更多 →
干货合集：2026年最值得体验的专业AI论文写作工具

干货合集：2026年最值得体验的专业AI论文写作工具

2026年AI论文写作工具已从“基础生成”升级为融合智能分析与学术合规的全流程解决方案，核心评价维度包括文献真实性、格式合规性、长文本逻辑、查重降重、AIGC合规等。本次测评覆盖6款主流工具，涵盖中英文写作、全流程与专项功能、免费与付费版本&#x…

2026/10/2 22:54:10 阅读更多 →
AssetBundle热更新安全排查：从CDN清单到本地缓存的全链路校验指南

AssetBundle热更新安全排查：从CDN清单到本地缓存的全链路校验指南

1. 项目概述：一次热更新安全隐患排查的完整复盘 做 Unity 客户端开发的朋友应该都有体会，AssetBundle 热更新方案上线容易，但真正让它长期稳定跑起来，靠的是细节。尤其是当你的游戏量级上来、CDN 节点分叉、本地缓存策略多样化之后…

2026/10/2 22:53:09 阅读更多 →

日新闻

从零搭建AI工程化：模型之外的完整闭环

从零搭建AI工程化：模型之外的完整闭环

先搞清楚一件事：从零开始做 AI 工程化，难的从来不是调模型、写提示词，而是把一套原型 Demo 变成长得像是“正经系统”的东西。你手里可能已经有了能跑通的代码，也可能刚读完一些概念，但真到了要把它变成可维护、可观测…

2026/10/2 0:00:20 阅读更多 →
大模型训练显存估计与混合精度训练实战指南

大模型训练显存估计与混合精度训练实战指南

1. 大模型训练显存估计与混合精度训练详解显存不够用，几乎是每个做大模型训练的人都会撞上的第一堵墙。你可能也经历过：模型代码写完了，数据管道跑通了，满心欢喜地按下训练启动脚本，结果几秒钟后终端弹出一行红字——C…

2026/10/2 0:00:20 阅读更多 →
小样本学习数据集选型指南：27个真正可用的高质量数据集

小样本学习数据集选型指南：27个真正可用的高质量数据集

1. 小样本学习的“弹药库”：为什么你总在找数据集，却总找不到真正能用的？ 小样本、数据集——这两个词最近半年在我处理的200多个AI项目咨询里，出现频率排进前三。不是模型调不好，不是代码写不对，而是卡在…

2026/10/2 0:00:20 阅读更多 →

周新闻

如何划分训练/验证集：Spirula Studio五种eval_mode策略详解

如何划分训练/验证集：Spirula Studio五种eval_mode策略详解

如何划分训练/验证集：Spirula Studio五种eval_mode策略详解 【免费下载链接】spirula-studio Cross-vendor 3D Gaussian Splatting trainer - video to splat to mesh, Vulkan or CUDA. 项目地址: https://gitcode.com/GitHub_Trending/sp/spirula-studio Sp…

2026/10/1 19:40:48 阅读更多 →
SEO怎么推广速查手册新手避坑实战指南

SEO怎么推广速查手册新手避坑实战指南

SEO怎么推广速查手册新手避坑实战指南 模板网站太丑不够用？别急着加滤镜，那是治标不治本。很多老板盯着后台流量掉得眼红，却还在纠结首页Banner的圆角是不是3像素。这就像穿着西装去挖土，姿势不对，努力白费。我整理这份 速查手册…

2026/10/1 19:41:40 阅读更多 →
FireRed-OpenStoryline少样本仿写深度解析:AI Agent如何复刻你的独特文案风格与节奏

FireRed-OpenStoryline少样本仿写深度解析:AI Agent如何复刻你的独特文案风格与节奏

FireRed-OpenStoryline少样本仿写深度解析:AI Agent如何复刻你的独特文案风格与节奏 【免费下载链接】FireRed-OpenStoryline FireRed-OpenStoryline is an AI video editing agent that transforms manual editing into intention-driven directing through natural language …

2026/10/1 20:05:24 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/2 10:36:31 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/2 5:26:06 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/2 6:09:11 阅读更多 →