@uiw/react-empty

Empty 空状态

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

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

基本使用

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

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

自定义

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

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

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

export default Demo

无描述展示

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

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

Props

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