mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-19 17:00:53 +08:00
9fcce8ffdc
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
* feat: ConfigProvider support classNames and styles for Empty * fix * fix
74 lines
2.0 KiB
Markdown
74 lines
2.0 KiB
Markdown
---
|
||
category: Components
|
||
group: Data Display
|
||
title: Empty
|
||
description: Empty state placeholder.
|
||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original
|
||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original
|
||
---
|
||
|
||
## When To Use
|
||
|
||
- When there is no data provided, display for friendly tips.
|
||
- User tutorial to create something in fresh new situation.
|
||
|
||
## Examples
|
||
|
||
<!-- prettier-ignore -->
|
||
<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/description.tsx">No description</code>
|
||
|
||
## API
|
||
|
||
Common props ref：[Common props](/docs/react/common-props)
|
||
|
||
```jsx
|
||
<Empty>
|
||
<Button>Create</Button>
|
||
</Empty>
|
||
```
|
||
|
||
| Property | Description | Type | Default | Version |
|
||
| --- | --- | --- | --- | --- |
|
||
| 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 | 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>
|
||
|
||
<style>
|
||
.site-empty-buildIn-img {
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
}
|
||
.site-empty-buildIn-simple {
|
||
width: 55px;
|
||
height: 35px;
|
||
background-image: url("https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png");
|
||
}
|
||
.site-empty-buildIn-default {
|
||
width: 121px;
|
||
height: 116px;
|
||
background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
|
||
}
|
||
</style>
|
||
|
||
## Semantic DOM
|
||
|
||
<code src="./demo/_semantic.tsx" simplify="true"></code>
|
||
|
||
## Design Token
|
||
|
||
<ComponentTokenTable component="Empty"></ComponentTokenTable>
|