ant-design/components/empty/index.en-US.md

62 lines
1.8 KiB
Markdown
Raw Normal View History

2018-12-26 16:01:00 +08:00
---
category: Components
type: Data Display
title: Empty
cols: 1
cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
2018-12-26 16:01:00 +08:00
---
Empty state placeholder.
## When To Use
2019-04-02 10:26:45 +08:00
- When there is no data provided, display for friendly tips.
- User tutorial to create something in fresh new situation.
2018-12-26 16:01:00 +08:00
## API
```jsx
<Empty>
<Button>Create</Button>
</Empty>
```
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| description | Customize description | string \| ReactNode | - | |
| imageStyle | The style of image | CSSProperties | - | |
| image | Customize image. Will treat as image url when string provided | string \| ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` | |
2019-04-02 10:26:45 +08:00
## Built-in images
2019-05-07 14:57:32 +08:00
- Empty.PRESENTED_IMAGE_SIMPLE
2019-04-02 10:26:45 +08:00
<div class="site-empty-buildIn-img site-empty-buildIn-simple"><div>
2019-04-02 10:26:45 +08:00
2019-05-07 14:57:32 +08:00
- Empty.PRESENTED_IMAGE_DEFAULT
2019-04-02 10:26:45 +08:00
<div class="site-empty-buildIn-img site-empty-buildIn-default"></div>
<style>
.site-empty-buildIn-img {
background-repeat: no-repeat;
background-size: cover;
}
.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");
}
[data-theme="dark"] .site-empty-buildIn-simple {
background-image: url("https://gw.alipayobjects.com/zos/antfincdn/ldFsHUh3Xh/ea62c5fe-07bb-4fcd-9d35-19220cef372e.png");
}
[data-theme="dark"] .site-empty-buildIn-default {
background-image: url("https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ");
}
</style>