何时使用

代码演示

水平分割线

带文字的分割线

设置分割线的间距大小

Divider
分割线

区隔内容的分割线。

使用import { Divider } from 'antd';

反馈

components/divider 提交问题待解决

文档

编辑此页 LLMs.md

Typography排版 Flex弹性布局

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本	全局配置
children	嵌套的标题	ReactNode	-		×
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-		6.0.0
dashed	是否虚线	boolean	false		×
orientation	水平或垂直类型	`horizontal` \| `vertical`	`horizontal`	-	×
~~orientationMargin~~	标题和最近 left/right 边框之间的距离，去除了分割线，同时 `titlePlacement` 不能为 `center`。如果传入 `string` 类型的数字且不带单位，默认单位是 px	string \| number	-		×
plain	文字是否显示为普通正文样式	boolean	false	4.2.0	×
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-		6.0.0
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	-	×

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

Token 名称

描述

类型

默认值

orientationMargin

文本与边缘距离，取值 0 ～ 1

number

0.05

textPaddingInline

文本横向内间距

PaddingInline<string | number> | undefined

1em

verticalMarginInline

纵向分割线的横向外间距

MarginInline<string | number> | undefined

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

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

fontSizeLG

大号字体大小

number

lineHeight

文本行高

number

1.5714285714285714

lineWidth

用于控制组件边框、分割线等的宽度

number

margin

控制元素外边距，中等尺寸。

number

marginLG

控制元素外边距，大尺寸。

number

marginXS

控制元素外边距，小尺寸。

number

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本	全局配置
children	嵌套的标题	ReactNode	-		×
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-		6.0.0
dashed	是否虚线	boolean	false		×
orientation	水平或垂直类型	`horizontal` \| `vertical`	`horizontal`	-	×
~~orientationMargin~~	标题和最近 left/right 边框之间的距离，去除了分割线，同时 `titlePlacement` 不能为 `center`。如果传入 `string` 类型的数字且不带单位，默认单位是 px	string \| number	-		×
plain	文字是否显示为普通正文样式	boolean	false	4.2.0	×
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-		6.0.0
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	-	×

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

Token 名称

描述

类型

默认值

orientationMargin

文本与边缘距离，取值 0 ～ 1

number

0.05

textPaddingInline

文本横向内间距

PaddingInline<string | number> | undefined

1em

verticalMarginInline

纵向分割线的横向外间距

MarginInline<string | number> | undefined

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

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

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

fontSizeLG

大号字体大小

number

lineHeight

文本行高

number

1.5714285714285714

lineWidth

用于控制组件边框、分割线等的宽度

number

margin

控制元素外边距，中等尺寸。

number

marginLG

控制元素外边距，大尺寸。

number

marginXS

控制元素外边距，小尺寸。

number

Ant Design

Divider
分割线

Ant Design

Divider
分割线

何时使用

代码演示

API

Semantic DOM

主题变量（Design Token）

何时使用

代码演示

API

Semantic DOM

主题变量（Design Token）

root

rail

content

Divider分割线

Divider分割线

何时使用

代码演示

API

Semantic DOM

主题变量（Design Token）

何时使用

代码演示

API

Semantic DOM

主题变量（Design Token）

root

rail

content

Divider
分割线

Divider
分割线