---
title: WKEmpty 空状态
group:
  title: 展示组件
  path: /show/
---

## 何时使用

空状态时的占位提示。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import { WKEmpty } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper title="基本使用">
      <WKEmpty desc="用于单子类无数据、没有内容等状态" />
    </PageWrapper>
  );
};
```

## 图片类型

```tsx
/**
 * title: 图片类型
 * desc: Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用
 */
import React from 'react';
import { WKEmpty } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper title="图片类型">
      <WKEmpty type="error" desc="用于发生错误等状态" />
      <WKEmpty type="empty" desc="用于商品、货物类没有数据等状态" />
      <WKEmpty type="network" desc="用于网络错误、连接失败等状态" />
      <WKEmpty type="search" desc="用于搜索内容没有数据等状态" />
    </PageWrapper>
  );
};
```

## 自定义图片

```tsx
/**
 * title: 自定义
 * desc: 需要自定义图片时，可以在 image 属性中传入任意图片 URL
 */
import React from 'react';
import { WKEmpty } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper title="自定义图片">
      <WKEmpty
        type="custom"
        url="https://cdn.wakecloud.com/resources/dss-web-portal/new-portal/img/prod_icon_1@2x.9c28fdf7.png"
        desc="自定义"
      />
    </PageWrapper>
  );
};
```

## 底部内容

```tsx
/**
 * title: 自定义
 * desc: 通过默认插槽可以在 Empty 组件的下方插入内容
 */
import React from 'react';
import { WKEmpty, WKButton } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper title="底部内容">
      <WKEmpty detail={<WKButton type="primary" text="按钮" />} type="custom" desc="自定义"></WKEmpty>
    </PageWrapper>
  );
};
```

## 重试

```tsx
/**
 * title: 重试
 * desc: 通过传递函数执行重试操作
 */
import React from 'react';
import { WKEmpty, WKButton } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  const onRetryClick = () => {};
  return (
    <PageWrapper title="重试操作">
      <WKEmpty onRetry={onRetryClick} retryText="重试" type="custom" desc="一些错误"></WKEmpty>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKEmpty/index.d.ts'></API>
