分割线 Divider - Ant Design

何时使用

对不同章节的文本段落进行分割。
对行内文字/链接进行分割，例如表格的操作列。

代码演示

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本
children	嵌套的标题	ReactNode	-
className	分割线样式类	string	-
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
dashed	是否虚线	boolean	false
orientation	水平或垂直类型	`horizontal` \| `vertical`	`horizontal`	-
~~orientationMargin~~	标题和最近 left/right 边框之间的距离，去除了分割线，同时 `titlePlacement` 不能为 `center`。如果传入 `string` 类型的数字且不带单位，默认单位是 px	string \| number	-
plain	文字是否显示为普通正文样式	boolean	false	4.2.0
style	分割线样式对象	CSSProperties	-
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
size	间距大小，仅对水平布局有效	`small` \| `medium` \| `large`	-	5.25.0
titlePlacement	分割线标题的位置	`start` \| `end` \| `center`	`center`	-
~~type~~	水平还是垂直类型	`horizontal` \| `vertical`	`horizontal`	-
variant	分割线是虚线、点线还是实线	`dashed` \| `dotted` \| `solid`	solid	5.20.0
vertical	是否垂直，和 orientation 同时配置以 orientation 优先	boolean	false	-

Semantic DOM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Solid

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Dotted

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Dashed

These

are

vertical

Dividers

root
根元素，包含边框顶部样式、分隔线样式等分割线容器的基础样式
rail
背景条元素，包含边框顶部样式等分割线连接条的样式
content
内容元素，包含行内块显示、内边距等分割线文本内容的样式

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
orientationMargin	文本与边缘距离，取值 0 ～ 1	number	0.05
textPaddingInline	文本横向内间距	PaddingInline<string \| number> \| undefined	1em
verticalMarginInline	纵向分割线的横向外间距	MarginInline<string \| number> \| undefined	8

全局 Token如何定制？

Token 名称	描述	类型	默认值
colorSplit	用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。	string	rgba(5,5,5,0.06)
colorText	最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。	string	rgba(0,0,0,0.88)
colorTextHeading	控制标题字体颜色。	string	rgba(0,0,0,0.88)
fontFamily	Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
fontSizeLG	大号字体大小	number	16
lineHeight	文本行高	number	1.5714285714285714
lineWidth	用于控制组件边框、分割线等的宽度	number	1
margin	控制元素外边距，中等尺寸。	number	16
marginLG	控制元素外边距，大尺寸。	number	24
marginXS	控制元素外边距，小尺寸。	number	8