react-empty

Empty 空状态

空状态时的展示占位图。新组件 v4.11.0+ 支持。

import { Empty } from 'uiw';
// or
import Empty from '@uiw/react-empty';

基本使用

import React from 'react';
import { Empty, Button } from 'uiw';

export default function Demo() {
  return <Empty />
}

自定义

通过自定义属性定制个性化展示。

import React from 'react';
import { Empty, Button, Icon } from 'uiw';

export default function Demo() {
  return (
    <Empty
      description={
        <span>
          Customize <a href="#">Description</a>
        </span>
      }
      icon={<Icon type="shopping-cart"  style={{ fontSize: '39px' }} />}
    >
      <Button type="primary">新增数据</Button>
    </Empty>
  )
}

无描述展示

import React from 'react';
import { Empty } from 'uiw';

export default function Demo() {
  return <Empty description={false} />
}

Props

参数	说明	类型	默认值
description	自定义描述内容	ReactNode	暂无数据
icon	可以替换内置图标	ReactNode	-
size	内置 svg 图标：尺寸	number | string	-
iconProps	内置 svg 图标：属性设置	React.SVGProps<SVGSVGElement>	-