基本
找不到应用
选择图片
找不到数据
找不到日志/作业/任务
找不到历史记录
搜索结果不匹配
没有评价
找不到图片
没有权限
全局化配置
自定义
无描述
API

Empty空状态

空状态时的展示占位图。

何时使用#

当目前没有数据时，用于显式的用户提示。
初始化场景时的引导创建流程。

代码演示

暂无数据

基本

简单的展示。

TypeScript
JavaScript
import { Empty } from 'infrad';

const App: React.FC = () => <Empty />;

export default App;

No Application Found

找不到应用

可以通过设置 type 为 NO_APP 选择另一种风格的图片。

import { Empty } from 'infrad';

ReactDOM.render(<Empty type="NO_APP" />, mountNode);

暂无数据

选择图片

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

TypeScript
JavaScript
import { Empty } from 'infrad';

const App: React.FC = () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;

export default App;

No Data

找不到数据

可以通过设置 type 为 NO_DATA 选择另一种风格的图片。

import { Empty } from 'infrad';

ReactDOM.render(<Empty type="NO_DATA" />, mountNode);

No Logs Found

找不到日志/作业/任务

可以通过设置 type 为 NO_LOG 选择另一种风格的图片。

import { Empty } from 'infrad';

ReactDOM.render(<Empty type="NO_LOG" />, mountNode);

No Operation Records

找不到历史记录

可以通过设置 type 为 NO_RECORDS 选择另一种风格的图片。

import { Empty } from 'infrad';

ReactDOM.render(<Empty type="NO_RECORDS" />, mountNode);

Your search does not match any results

搜索结果不匹配

可以通过设置 type 为 NO_RESULTS 选择另一种风格的图片。

import { Empty } from 'infrad';

ReactDOM.render(<Empty type="NO_RESULTS" />, mountNode);

You hava not received any ratings

没有评价

可以通过设置 type 为 NO_RATINGS 选择另一种风格的图片。

import { Empty } from 'infrad';

ReactDOM.render(<Empty type="NO_RATINGS" />, mountNode);

No Image Found

找不到图片

可以通过设置 type 为 NO_IMAGE 选择另一种风格的图片。

import { Empty } from 'infrad';

ReactDOM.render(<Empty type="NO_IMAGE" />, mountNode);

No Premission

没有权限

可以通过设置 type 为 NO_PREMISSION 选择另一种风格的图片。

import { Empty } from 'infrad';

ReactDOM.render(<Empty type="NO_PREMISSION" />, mountNode);

Select

TreeSelect

Cascader

Transfer

0 项

No Data

0 项

No Data

Table

Name	Age
暂无数据

List

暂无数据

全局化配置

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

TypeScript
JavaScript
import { SmileOutlined } from 'infra-design-icons';
import {
  Cascader,
  ConfigProvider,
  Divider,
  List,
  Select,
  Switch,
  Table,
  Transfer,
  TreeSelect,
} from 'infrad';
import React, { useState } from 'react';

const customizeRenderEmpty = () => (
  <div style={{ textAlign: 'center' }}>
    <SmileOutlined style={{ fontSize: 20 }} />
    <p>Data Not Found</p>
  </div>
);

const style = { width: 200 };

const App: React.FC = () => {
  const [customize, setCustomize] = useState(false);

  return (
    <div>
      <Switch
        unCheckedChildren="default"
        checkedChildren="customize"
        checked={customize}
        onChange={val => {
          setCustomize(val);
        }}
      />

      <Divider />

      <ConfigProvider renderEmpty={customize ? customizeRenderEmpty : undefined}>
        <div className="config-provider">
          <h4>Select</h4>
          <Select style={style} />

          <h4>TreeSelect</h4>
          <TreeSelect style={style} treeData={[]} />

          <h4>Cascader</h4>
          <Cascader style={style} options={[]} showSearch />

          <h4>Transfer</h4>
          <Transfer />

          <h4>Table</h4>
          <Table
            style={{ marginTop: 8 }}
            columns={[
              {
                title: 'Name',
                dataIndex: 'name',
                key: 'name',
              },
              {
                title: 'Age',
                dataIndex: 'age',
                key: 'age',
              },
            ]}
          />

          <h4>List</h4>
          <List />
        </div>
      </ConfigProvider>
    </div>
  );
};

export default App;

Customize Description

自定义

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

TypeScript
JavaScript
import { Button, Empty } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <Empty
    image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
    imageStyle={{
      height: 60,
    }}
    description={
      <span>
        Customize <a href="#API">Description</a>
      </span>
    }
  >
    <Button type="primary">Create Now</Button>
  </Empty>
);

export default App;

无描述

无描述展示。

TypeScript
JavaScript
import { Empty } from 'infrad';

const App: React.FC = () => <Empty description={false} />;

export default App;

API#

<Empty>
  <Button>创建</Button>
</Empty>

参数	说明	类型	默认值
description	自定义描述内容	ReactNode	-
image	设置显示图片，为 string 时表示自定义图片地址。	ReactNode	`Empty.PRESENTED_IMAGE_DEFAULT`
imageStyle	图片样式	CSSProperties	-
type	多种类型的空状态,优先级比 image 低	String	'NO_APP' \| 'NO_DATA' \| 'NO_LOG' \| 'NO_RECORDS' \| 'NO_RESULTS' \| 'NO_RATINGS' \| 'NO_IMAGE' \| 'NO_PREMISSION'

内置图片#

Empty.PRESENTED_IMAGE_SIMPLE
Empty.PRESENTED_IMAGE_DEFAULT