# Empty 空状态

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/empty/freepass)
- 平台：PC
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s48
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Empty]

## 代码演示

### 基础用法

引用对应的icon图标,可自行添加标题和描述.

```jsx
import { Component } from "react";
import { Empty, Icon, constants } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-empty`;

export default class EmptyDemo extends Component {

  render() {
    return (
      <div className={prefixCls}>
        <Empty
          title={'暂无待办流程'}
          description='您暂时还没有待办流程，可以主动发起一条试试哦~'
          image={
            <Icon
              style={{ width: 100, height: 100 }}
              name={'Icon-empty-file'
              } />
          }
        />
      </div>
    )
  }
}
```

### 自定义图片

自定义图片链接,图片大小等.

```jsx
import { Component } from "react";
import { Empty, Button, constants } from "@weapp/ui";
import imageSrc from "../../../../assets/images/5642.jpg_wh300.jpg"

const prefixCls = `${constants.uiPcClsPrefix}-demo-empty`;

export default class EmptyDemo extends Component {
  renderFooter = () => <Button type={'primary'}>新建流程</Button>

  render() {
    return (
      <div className={prefixCls}>
        <Empty
          description={
            <span>
              Customize  <a href="#API">Description</a>
            </span>
          }
          image={imageSrc}
          imageStyle={{ height: 100 }}
          renderFooter={this.renderFooter}
        />
      </div>
    )
  }
}
```

### error类型

可修改 displayType 来展示 error 类型

```jsx
import { Component } from "react";
import { Empty, Button, constants } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-empty`;

export default class EmptyDemo extends Component {

  render() {
    return (
      <div className={prefixCls}>
        <Empty
         
          displayType={'404'}
        />
      </div>
    )
  }
}
```

### 不支持IE浏览器提示

可修改 displayType 来展示 IE浏览器支持提示

```jsx
import { Component } from "react";
import { Empty, Button, constants } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-empty`;

export default class EmptyDemo extends Component {

  render() {
    return (
      <div className={prefixCls}>
        <Empty
         
          displayType={'ie'}
        />
      </div>
    )
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| title | 主要文字描述 | ReactNode | 否 |  |
| description | 次要文字描述 | ReactNode | 否 |  |
| image | 设置显示图片，为 string 时表示自定义图片地址。 | ReactNode | 否 |  |
| imageStyle | 图片样式 | CSSProperties | 否 |  |
| style | style 样式 | CSSProperties | 否 |  |
| renderFooter | 自定义底部内容 | ()=>ReactNode | 否 |  |
| displayType | 展示类型 | ’404‘ \| ’ie‘ | 否 |  |
| customRender | 自定义渲染 | (_: any, ele: React.ReactNode) =>React.ReactNode | 否 |  |
