2018-12-26 16:01:00 +08:00
|
|
|
---
|
|
|
|
category: Components
|
|
|
|
subtitle: 空状态
|
2022-11-09 12:28:04 +08:00
|
|
|
group: 数据展示
|
2018-12-26 16:01:00 +08:00
|
|
|
title: Empty
|
2022-11-30 20:14:41 +08:00
|
|
|
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original
|
2018-12-26 16:01:00 +08:00
|
|
|
---
|
|
|
|
|
|
|
|
空状态时的展示占位图。
|
|
|
|
|
|
|
|
## 何时使用
|
|
|
|
|
2019-04-02 10:26:45 +08:00
|
|
|
- 当目前没有数据时,用于显式的用户提示。
|
|
|
|
- 初始化场景时的引导创建流程。
|
2019-03-20 17:45:35 +08:00
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
## 代码演示
|
|
|
|
|
2022-11-17 17:31:26 +08:00
|
|
|
<!-- prettier-ignore -->
|
2022-11-09 12:28:04 +08:00
|
|
|
<code src="./demo/basic.tsx">基本</code>
|
|
|
|
<code src="./demo/simple.tsx">选择图片</code>
|
|
|
|
<code src="./demo/customize.tsx">自定义</code>
|
|
|
|
<code src="./demo/config-provider.tsx">全局化配置</code>
|
|
|
|
<code src="./demo/description.tsx">无描述</code>
|
|
|
|
|
2018-12-26 16:01:00 +08:00
|
|
|
## API
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
<Empty>
|
|
|
|
<Button>创建</Button>
|
|
|
|
</Empty>
|
|
|
|
```
|
|
|
|
|
2019-07-11 14:14:33 +08:00
|
|
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
|
|
| --- | --- | --- | --- | --- |
|
2020-10-09 10:08:52 +08:00
|
|
|
| description | 自定义描述内容 | ReactNode | - | |
|
|
|
|
| image | 设置显示图片,为 string 时表示自定义图片地址。 | ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` | |
|
2020-10-21 10:33:43 +08:00
|
|
|
| imageStyle | 图片样式 | CSSProperties | - | |
|
2019-04-02 10:26:45 +08:00
|
|
|
|
2019-11-20 20:31:43 +08:00
|
|
|
## 内置图片
|
2019-04-02 10:26:45 +08:00
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
- Empty.PRESENTED_IMAGE_SIMPLE
|
2019-04-02 10:26:45 +08:00
|
|
|
|
2019-12-26 11:42:50 +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
|
|
|
|
2019-12-26 11:42:50 +08:00
|
|
|
<div class="site-empty-buildIn-img site-empty-buildIn-default"></div>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.site-empty-buildIn-img {
|
|
|
|
background-repeat: no-repeat;
|
2021-06-01 13:28:25 +08:00
|
|
|
background-size: contain;
|
2019-12-26 11:42:50 +08:00
|
|
|
}
|
|
|
|
.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;
|
2020-01-03 19:00:01 +08:00
|
|
|
height: 116px;
|
2019-12-26 11:42:50 +08:00
|
|
|
background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
|
|
|
|
}
|
|
|
|
</style>
|