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> | - |