Ant Design Divider 带文字分割线完全指南orientation 与 orientationMargin 的实战用法【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design本文以 Ant DesignantdDivider 组件的「带文字分割线」能力为核心系统讲解orientation文字位置、orientationMargin文字与边缘间距两大核心参数的用法、底层实现原理与踩坑细节。阅读完本文你将掌握如何在段落之间插入带标题的水平分割线、将文字对齐到左/中/右三个方向并能精准控制文字与分割线边缘的距离同时理解这些能力在源码中的实现机制。一、功能概述什么时候需要带文字的分割线Divider分割线用于区隔不同内容。官方文档组件总览给出的适用场景是对不同章节的文本段落进行分割对行内文字/链接进行分割例如表格的操作列。而「带文字的分割线」则是在水平分割线的中间或两侧嵌入一段标题文字常用于文章小标题、表单分组标题、卡片分区块标题等场景。本仓库中的官方演示位于 components/divider/demo/with-text.tsx其配套说明文档正是 components/divider/demo/with-text.md核心要点只有一句话分割线中带有文字可以用orientation指定文字位置设置orientationleft/right即可对齐到两侧。orientation共有三个取值left、right、center默认值为center见 API 表格。二、最小可运行示例插入带文字的分割线把任意 ReactNode 作为 Divider 的children传入即可在分割线中嵌入文字。官方 demo 的完整代码如下import React from react; import { Divider } from antd; const App: React.FC () ( p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. /p DividerText/Divider p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. /p Divider orientationleftLeft Text/Divider p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. /p Divider orientationrightRight Text/Divider p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. /p / ); export default App;运行效果DividerText/Divider文字居中两侧各占 50% 的分割线Divider orientationleftLeft Text/Divider文字靠左左侧短线、右侧长线Divider orientationrightRight Text/Divider文字靠右左侧长线、右侧短线。从组件源码components/divider/index.tsx可以印证只要children存在组件就会生成.ant-divider-with-text与.ant-divider-with-text-${orientation}两个组合类名第 57-58 行并将文字渲染进span classant-divider-inner-text中第 104-108 行const hasChildren !!children; // ... { [${prefixCls}-with-text]: hasChildren, [${prefixCls}-with-text-${orientation}]: hasChildren, // ... } // ... {children type ! vertical ( span className{${prefixCls}-inner-text} style{innerStyle} {children} /span )}三、orientation文字位置的三种布局及其样式原理orientation决定文字在分割线上的位置类型为left | right | center默认center。其视觉实现的底层逻辑位于样式文件 components/divider/style/index.ts带文字的横向分割线被设置为display: flex; align-items: center文字两侧由::before与::after两个伪元素撑起分割线段居中默认::before与::after各占width: 50%left::before占calc(0.05 * 100%)即默认orientationMargintoken::after占剩余宽度right::before占剩余宽度::after占calc(0.05 * 100%)。对应源码style/index.ts 第 95-111 行[-horizontal${componentCls}-with-text-left]: { ::before: { width: calc(${orientationMargin} * 100%) }, ::after: { width: calc(100% - ${orientationMargin} * 100%) }, }, [-horizontal${componentCls}-with-text-right]: { ::before: { width: calc(100% - ${orientationMargin} * 100%) }, ::after: { width: calc(${orientationMargin} * 100%) }, },这里出现的orientationMargin是组件级 Design Token默认值为0.05见 style/index.ts 第 198-202 行的prepareComponentToken它表示文字与最近边缘之间的默认间距比例与下方要讲的 proporientationMargin相互配合。四、orientationMargin精细控制文字与边缘的距离当orientation为left或right时可通过orientationMargin显式覆盖默认间距。其类型为string | number默认值-不传则使用 token 默认比例。官方 demo 中展示了两种传法{/* 字符串数字不带单位时按 px 处理 */} Divider orientationleft orientationMargin0 Left Text with 0 orientationMargin /Divider {/* 数字直接按 px 处理 */} Divider orientationright orientationMargin{50} Right Text with 50px orientationMargin /Divider4.1 数字与字符串的解析规则组件源码index.tsx 第 70-78 行通过useMemo对orientationMargin做了归一化处理const memoizedOrientationMargin React.useMemostring | number(() { if (typeof orientationMargin number) { return orientationMargin; } if (/^\d$/.test(orientationMargin!)) { return Number(orientationMargin); } return orientationMargin!; }, [orientationMargin]);规则可总结为传入值解析结果数字如50原样保留按 50px 计算纯数字字符串如10转换为 Number按 10px 计算带单位字符串如1em、10%原样保留作为 CSS 值使用这一规则被单元测试直接覆盖components/divider/tests/index.test.tsx 中的support string orientationMargin用例断言Divider orientationright orientationMargin10渲染出的.ant-divider-inner-text具备marginRight: 10。4.2 在组件内部如何生效只有同时满足「orientation为left/right」且「orientationMargin不为空」时自定义间距才会生效。源码第 48-49 行const hasCustomMarginLeft orientation left orientationMargin ! null; const hasCustomMarginRight orientation right orientationMargin ! null;随后组件会追加-no-default-orientation-margin-left/-no-default-orientation-margin-right类名index.tsx 第 63-64 行内部文字节点上直接写入marginLeft/marginRight行内样式index.tsx 第 80-83 行样式表中带该类名的::before/::after分别收窄为width: 0与width: 100%同时给文字补上sizePaddingEdgeHorizontal内边距避免文字贴边style/index.ts 第 165-193 行。也就是说orientationMargin的本质是让文字紧贴某一边同时通过内边距保证可读性。五、与 plain、dashed、variant 的搭配带文字分割线可以与其他 Divider 属性自由组合plain将标题文字从「标题样式」降级为「普通正文样式」。默认带文字时文字使用colorTextHeading颜色、fontWeight: 500、fontSizeLG字号style/index.ts 第 76-79 行设置plain后切换为colorText、正常字重与正文字号style/index.ts 第 159-163 行。相关演示见 components/divider/demo/plain.tsx 与 components/divider/demo/plain.md。dashed/variantvariant5.20.0 起支持可取dashed、dotted、solid控制分割线线型带文字时伪元素同样继承对应线型style/index.ts 第 126-130、146-150 行。演示见 components/divider/demo/variant.tsx。typevertical垂直分割线不支持 children。源码中会给出警告children not working in vertical mode.index.tsx 第 86-94 行且渲染逻辑上children type ! vertical才会渲染文字节点第 104 行对应测试用例not show children when vertical验证了.ant-divider-inner-text不会被渲染。六、Design Token 层面的可定制性除了 prop带文字分割线还暴露了组件级 Design Token见 style/index.ts 第 10-26 行与 API 文档的 主题变量章节Token说明默认值textPaddingInline文字横向内间距1emorientationMargin文字与边缘距离比例取值 0 10.05verticalMarginInline垂直分割线的横向外边距marginXS这意味着即便不写orientationMarginprop也可以通过主题配置全局调整文字默认贴边比例。需要更极致的样式定制时可参考仓库中的 样式自定义演示 与 组件 Token 演示。七、实用建议与注意事项默认即居中不传orientation时文字居中适合作为章节标题需要贴边时再显式指定left/right。orientationMargin仅在left/right下生效居中模式下该参数无意义源码中也不会为center生成自定义边距逻辑。单位约定纯数字字符串如10会被当作 px 处理这在测试中已确认如需百分比或 em 等相对单位请传入带单位的字符串。垂直模式不要传 children垂直分割线用于行内区隔如表格操作列文字不会渲染并会触发开发环境警告。批量定制用 Token多个页面的分割线文字间距希望统一时优先通过主题 Token 的orientationMargin比例值调整而不是在每个使用处重复传 prop。综上带文字分割线是 Divider 组件中高频实用的能力。掌握orientation与orientationMargin的取值语义、字符串解析规则及其背后的样式实现你就能在文章中、表单分组里、卡片标题区灵活地构建出结构清晰、间距可控的分割标题并且在使用、排查问题时直达源码本质。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design Divider 带文字分割线完全指南：orientation 与 orientationMargin 的实战用法
Ant Design Divider 带文字分割线完全指南orientation 与 orientationMargin 的实战用法【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design本文以 Ant DesignantdDivider 组件的「带文字分割线」能力为核心系统讲解orientation文字位置、orientationMargin文字与边缘间距两大核心参数的用法、底层实现原理与踩坑细节。阅读完本文你将掌握如何在段落之间插入带标题的水平分割线、将文字对齐到左/中/右三个方向并能精准控制文字与分割线边缘的距离同时理解这些能力在源码中的实现机制。一、功能概述什么时候需要带文字的分割线Divider分割线用于区隔不同内容。官方文档组件总览给出的适用场景是对不同章节的文本段落进行分割对行内文字/链接进行分割例如表格的操作列。而「带文字的分割线」则是在水平分割线的中间或两侧嵌入一段标题文字常用于文章小标题、表单分组标题、卡片分区块标题等场景。本仓库中的官方演示位于 components/divider/demo/with-text.tsx其配套说明文档正是 components/divider/demo/with-text.md核心要点只有一句话分割线中带有文字可以用orientation指定文字位置设置orientationleft/right即可对齐到两侧。orientation共有三个取值left、right、center默认值为center见 API 表格。二、最小可运行示例插入带文字的分割线把任意 ReactNode 作为 Divider 的children传入即可在分割线中嵌入文字。官方 demo 的完整代码如下import React from react; import { Divider } from antd; const App: React.FC () ( p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. /p DividerText/Divider p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. /p Divider orientationleftLeft Text/Divider p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. /p Divider orientationrightRight Text/Divider p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. /p / ); export default App;运行效果DividerText/Divider文字居中两侧各占 50% 的分割线Divider orientationleftLeft Text/Divider文字靠左左侧短线、右侧长线Divider orientationrightRight Text/Divider文字靠右左侧长线、右侧短线。从组件源码components/divider/index.tsx可以印证只要children存在组件就会生成.ant-divider-with-text与.ant-divider-with-text-${orientation}两个组合类名第 57-58 行并将文字渲染进span classant-divider-inner-text中第 104-108 行const hasChildren !!children; // ... { [${prefixCls}-with-text]: hasChildren, [${prefixCls}-with-text-${orientation}]: hasChildren, // ... } // ... {children type ! vertical ( span className{${prefixCls}-inner-text} style{innerStyle} {children} /span )}三、orientation文字位置的三种布局及其样式原理orientation决定文字在分割线上的位置类型为left | right | center默认center。其视觉实现的底层逻辑位于样式文件 components/divider/style/index.ts带文字的横向分割线被设置为display: flex; align-items: center文字两侧由::before与::after两个伪元素撑起分割线段居中默认::before与::after各占width: 50%left::before占calc(0.05 * 100%)即默认orientationMargintoken::after占剩余宽度right::before占剩余宽度::after占calc(0.05 * 100%)。对应源码style/index.ts 第 95-111 行[-horizontal${componentCls}-with-text-left]: { ::before: { width: calc(${orientationMargin} * 100%) }, ::after: { width: calc(100% - ${orientationMargin} * 100%) }, }, [-horizontal${componentCls}-with-text-right]: { ::before: { width: calc(100% - ${orientationMargin} * 100%) }, ::after: { width: calc(${orientationMargin} * 100%) }, },这里出现的orientationMargin是组件级 Design Token默认值为0.05见 style/index.ts 第 198-202 行的prepareComponentToken它表示文字与最近边缘之间的默认间距比例与下方要讲的 proporientationMargin相互配合。四、orientationMargin精细控制文字与边缘的距离当orientation为left或right时可通过orientationMargin显式覆盖默认间距。其类型为string | number默认值-不传则使用 token 默认比例。官方 demo 中展示了两种传法{/* 字符串数字不带单位时按 px 处理 */} Divider orientationleft orientationMargin0 Left Text with 0 orientationMargin /Divider {/* 数字直接按 px 处理 */} Divider orientationright orientationMargin{50} Right Text with 50px orientationMargin /Divider4.1 数字与字符串的解析规则组件源码index.tsx 第 70-78 行通过useMemo对orientationMargin做了归一化处理const memoizedOrientationMargin React.useMemostring | number(() { if (typeof orientationMargin number) { return orientationMargin; } if (/^\d$/.test(orientationMargin!)) { return Number(orientationMargin); } return orientationMargin!; }, [orientationMargin]);规则可总结为传入值解析结果数字如50原样保留按 50px 计算纯数字字符串如10转换为 Number按 10px 计算带单位字符串如1em、10%原样保留作为 CSS 值使用这一规则被单元测试直接覆盖components/divider/tests/index.test.tsx 中的support string orientationMargin用例断言Divider orientationright orientationMargin10渲染出的.ant-divider-inner-text具备marginRight: 10。4.2 在组件内部如何生效只有同时满足「orientation为left/right」且「orientationMargin不为空」时自定义间距才会生效。源码第 48-49 行const hasCustomMarginLeft orientation left orientationMargin ! null; const hasCustomMarginRight orientation right orientationMargin ! null;随后组件会追加-no-default-orientation-margin-left/-no-default-orientation-margin-right类名index.tsx 第 63-64 行内部文字节点上直接写入marginLeft/marginRight行内样式index.tsx 第 80-83 行样式表中带该类名的::before/::after分别收窄为width: 0与width: 100%同时给文字补上sizePaddingEdgeHorizontal内边距避免文字贴边style/index.ts 第 165-193 行。也就是说orientationMargin的本质是让文字紧贴某一边同时通过内边距保证可读性。五、与 plain、dashed、variant 的搭配带文字分割线可以与其他 Divider 属性自由组合plain将标题文字从「标题样式」降级为「普通正文样式」。默认带文字时文字使用colorTextHeading颜色、fontWeight: 500、fontSizeLG字号style/index.ts 第 76-79 行设置plain后切换为colorText、正常字重与正文字号style/index.ts 第 159-163 行。相关演示见 components/divider/demo/plain.tsx 与 components/divider/demo/plain.md。dashed/variantvariant5.20.0 起支持可取dashed、dotted、solid控制分割线线型带文字时伪元素同样继承对应线型style/index.ts 第 126-130、146-150 行。演示见 components/divider/demo/variant.tsx。typevertical垂直分割线不支持 children。源码中会给出警告children not working in vertical mode.index.tsx 第 86-94 行且渲染逻辑上children type ! vertical才会渲染文字节点第 104 行对应测试用例not show children when vertical验证了.ant-divider-inner-text不会被渲染。六、Design Token 层面的可定制性除了 prop带文字分割线还暴露了组件级 Design Token见 style/index.ts 第 10-26 行与 API 文档的 主题变量章节Token说明默认值textPaddingInline文字横向内间距1emorientationMargin文字与边缘距离比例取值 0 10.05verticalMarginInline垂直分割线的横向外边距marginXS这意味着即便不写orientationMarginprop也可以通过主题配置全局调整文字默认贴边比例。需要更极致的样式定制时可参考仓库中的 样式自定义演示 与 组件 Token 演示。七、实用建议与注意事项默认即居中不传orientation时文字居中适合作为章节标题需要贴边时再显式指定left/right。orientationMargin仅在left/right下生效居中模式下该参数无意义源码中也不会为center生成自定义边距逻辑。单位约定纯数字字符串如10会被当作 px 处理这在测试中已确认如需百分比或 em 等相对单位请传入带单位的字符串。垂直模式不要传 children垂直分割线用于行内区隔如表格操作列文字不会渲染并会触发开发环境警告。批量定制用 Token多个页面的分割线文字间距希望统一时优先通过主题 Token 的orientationMargin比例值调整而不是在每个使用处重复传 prop。综上带文字分割线是 Divider 组件中高频实用的能力。掌握orientation与orientationMargin的取值语义、字符串解析规则及其背后的样式实现你就能在文章中、表单分组里、卡片标题区灵活地构建出结构清晰、间距可控的分割标题并且在使用、排查问题时直达源码本质。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考