空状态 Empty - Ant Design

何时使用

当目前没有数据时，用于显式的用户提示。
初始化场景时的引导创建流程。

代码演示

API

通用属性参考：通用属性

jsx

<Empty>
  <Button>创建</Button>
</Empty>

参数	说明	类型	默认值	版本
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
description	自定义描述内容	ReactNode	-
image	设置显示图片，为 string 时表示自定义图片地址。	ReactNode	`Empty.PRESENTED_IMAGE_DEFAULT`
~~imageStyle~~	图片样式，请使用 `styles.image` 替代	CSSProperties	-
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-

内置图片

Empty.PRESENTED_IMAGE_SIMPLE
Empty.PRESENTED_IMAGE_DEFAULT

Semantic DOM

Customize Description

root
5.23.0
根元素，设置文本对齐、字体和行高样式
image
5.23.0
图标元素，设置高度、透明度、边距和图片样式
description
5.23.0
描述元素，设置文本颜色样式
footer
5.23.0
底部元素，设置顶部边距和操作按钮样式

主题变量（Design Token）

全局 Token如何定制？

Token 名称	描述	类型	默认值
colorTextDescription	控制文本描述字体颜色。	string	rgba(0,0,0,0.45)
controlHeightLG	较高的组件高度	number	40
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
lineHeight	文本行高	number	1.5714285714285714
margin	控制元素外边距，中等尺寸。	number	16
marginXL	控制元素外边距，超大尺寸。	number	32
marginXS	控制元素外边距，小尺寸。	number	8
opacityImage	控制图片不透明度	number	1