Tantalum UI

Empty 空状态 

import { TaImage, TaButton, TaGroup, TaEmpty } from '@/index'

export default function ExpEmpty() {
  return (
    <>
      <TaGroup title="基础用法">
        <TaEmpty description="暂无内容" />
      </TaGroup>
      <TaGroup title="其他类型">
        <TaEmpty description="出错了" type="error" />
        <TaEmpty description="网络错误" type="network" />
        <TaEmpty description="搜索不到" type="search" />
      </TaGroup>
      <TaGroup title="Slot default">
        <TaEmpty description="网络错误" type="network">
          <TaButton type="primary" size="small">
            刷新试试
          </TaButton>
        </TaEmpty>
      </TaGroup>
      <TaGroup title="renderImage">
        <TaEmpty
          description="网站被小猫咪吃了"
          renderImage={() => (
            <TaImage
              className="exp-empty-custom-image"
              src="https://cdn.fox2.cn/vfox/swiper/different-1.jpg"
            />
          )}
        />
      </TaGroup>
    </>
  )
}

Import 

import { TaEmpty } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

import type { EmptyType } from 'tantalum-ui-mobile-react'

Props

属性类型默认值必填说明
descriptionstring否描述文字
typeEmptyType'default'否图片类型，可选 'default', 'error', 'network', 'search'

Slots

底部（children） 

<TaEmpty description="网络错误" type="network">
  <TaButton type="primary" size="small">
    刷新试试
  </TaButton>
</TaEmpty>

图片区域（renderImage） 

<TaEmpty
  description="网站被小猫咪吃了"
  renderImage={() => (
    <TaImage
      className="exp-empty-custom-image"
      src="https://cdn.fox2.cn/vfox/swiper/different-1.jpg"
    />
  )}
/>

注：优先级比内置图片高。