Empty - Ant Design — ContextQMD

When To Use

When there is no data provided, display for friendly tips.
User tutorial to create something in fresh new situation.

Examples

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/simple.tsx">Choose image</code> <code src="./demo/customize.tsx">Customize</code> <code src="./demo/config-provider.tsx">ConfigProvider</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/description.tsx">No description</code>

API

Common props ref：Common props

jsx

<Empty>
  <Button>Create</Button>
</Empty>

Property	Description	Type	Default
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
description	Customize description	ReactNode	-
image	Customize image. Will treat as image url when string provided	ReactNode	`Empty.PRESENTED_IMAGE_DEFAULT`
~~imageStyle~~	The style of image, please use `styles.image` instead	CSSProperties	-
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-

Built-in images

Empty.PRESENTED_IMAGE_SIMPLE
<div class="site-empty-buildIn-img site-empty-buildIn-simple"><div>
Empty.PRESENTED_IMAGE_DEFAULT
<div class="site-empty-buildIn-img site-empty-buildIn-default"></div>

Semantic DOM

Design Token