Basic
No Applocation Found
Chose image
No Data
No Logs Found
No Operation Records
Your search does not match any results
You have not received any ratings
No Image Found
No Premission
ConfigProvider
Customize
No description
API

Empty

Empty state placeholder.

When To Use#

When there is no data provided, display for friendly tips.
User tutorial to create something in fresh new situation.

Examples

No Data

Basic

Simplest Usage.

TypeScript
JavaScript
import { Empty } from 'infrad';

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

export default App;

No Application Found

No Applocation Found

You can choose another style of type by setting image to NO_APP.

import { Empty } from 'infrad';

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

No Data

Chose image

You can choose another style of image by setting image to 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

You can choose another style of type by setting image to NO_DATA.

import { Empty } from 'infrad';

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

No Logs Found

You can choose another style of type by setting image to NO_LOG.

import { Empty } from 'infrad';

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

No Operation Records

You can choose another style of type by setting image to NO_RECORDS.

import { Empty } from 'infrad';

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

Your search does not match any results

You can choose another style of type by setting image to NO_RESULTS.

import { Empty } from 'infrad';

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

You hava not received any ratings

You have not received any ratings

You can choose another style of type by setting image to NO_RATINGS.

import { Empty } from 'infrad';

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

No Image Found

You can choose another style of type by setting image to NO_IMAGE.

import { Empty } from 'infrad';

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

No Premission

You can choose another style of type by setting image to NO_PREMISSION.

import { Empty } from 'infrad';

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

Select

TreeSelect

Cascader

Transfer

0 item

No Data

0 item

No Data

Table

Name	Age
No Data

List

No Data

ConfigProvider

Use ConfigProvider set global Empty style.

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

Customize

Customize image source, image size, description and extra content.

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;

No description

Simplest Usage with no description.

TypeScript
JavaScript
import { Empty } from 'infrad';

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

export default App;

API#

<Empty>
  <Button>Create</Button>
</Empty>

Property	Description	Type	Default
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
Empty.PRESENTED_IMAGE_DEFAULT