Empty空状态

空状态时的展示占位图。

何时使用

  • 当目前没有数据时,用于显式的用户提示。

  • 初始化场景时的引导创建流程。

代码演示

Empty空状态 - 图1

基本

简单的展示。

  1. import { Empty } from 'antd';
  2. ReactDOM.render(<Empty />, mountNode);

Empty空状态 - 图2

选择图片

可以通过设置 imageEmpty.PRESENTED_IMAGE_SIMPLE 选择另一种风格的图片。

  1. import { Empty } from 'antd';
  2. ReactDOM.render(<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />, mountNode);

Empty空状态 - 图3

自定义

自定义图片链接、图片大小、描述、附属内容。

  1. import { Empty, Button } from 'antd';
  2. ReactDOM.render(
  3. <Empty
  4. image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
  5. imageStyle={{
  6. height: 60,
  7. }}
  8. description={
  9. <span>
  10. Customize <a href="#API">Description</a>
  11. </span>
  12. }
  13. >
  14. <Button type="primary">Create Now</Button>
  15. </Empty>,
  16. mountNode,
  17. );

Empty空状态 - 图4

全局化配置

自定义全局组件的 Empty 样式。

  1. import {
  2. ConfigProvider,
  3. Switch,
  4. Divider,
  5. TreeSelect,
  6. Select,
  7. Cascader,
  8. Transfer,
  9. Table,
  10. List,
  11. } from 'antd';
  12. import { SmileOutlined } from '@ant-design/icons';
  13. const customizeRenderEmpty = () => (
  14. <div style={{ textAlign: 'center' }}>
  15. <SmileOutlined style={{ fontSize: 20 }} />
  16. <p>Data Not Found</p>
  17. </div>
  18. );
  19. const style = { width: 200 };
  20. class Demo extends React.Component {
  21. state = {
  22. customize: false,
  23. };
  24. render() {
  25. const { customize } = this.state;
  26. return (
  27. <div>
  28. <Switch
  29. unCheckedChildren="default"
  30. checkedChildren="customize"
  31. checked={customize}
  32. onChange={val => {
  33. this.setState({ customize: val });
  34. }}
  35. />
  36. <Divider />
  37. <ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
  38. <div className="config-provider">
  39. <h3>Select</h3>
  40. <Select style={style} />
  41. <h3>TreeSelect</h3>
  42. <TreeSelect style={style} treeData={[]} />
  43. <h3>Cascader</h3>
  44. <Cascader style={style} options={[]} showSearch />
  45. <h3>Transfer</h3>
  46. <Transfer />
  47. <h3>Table</h3>
  48. <Table
  49. style={{ marginTop: 8 }}
  50. columns={[
  51. {
  52. title: 'Name',
  53. dataIndex: 'name',
  54. key: 'name',
  55. },
  56. {
  57. title: 'Age',
  58. dataIndex: 'age',
  59. key: 'age',
  60. },
  61. ]}
  62. />
  63. <h3>List</h3>
  64. <List />
  65. </div>
  66. </ConfigProvider>
  67. </div>
  68. );
  69. }
  70. }
  71. ReactDOM.render(<Demo />, mountNode);

Empty空状态 - 图5

无描述

无描述展示。

  1. import { Empty } from 'antd';
  2. ReactDOM.render(<Empty description={false} />, mountNode);

API

  1. <Empty>
  2. <Button>创建</Button>
  3. </Empty>
参数说明类型默认值版本
description自定义描述内容string | ReactNode-
imageStyle图片样式CSSProperties-
image设置显示图片,为 string 时表示自定义图片地址。string | ReactNodeEmpty.PRESENTED_IMAGE_DEFAULT

内置图片

  • Empty.PRESENTED_IMAGE_SIMPLE
  • Empty.PRESENTED_IMAGE_DEFAULT