前端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），仅供参考