Empty

当没有数据可显示时显示占位符内容。

导入

import { Empty } from 'asterui'

示例

基础空状态

带默认图片的简单空状态。

</>

No data

import { Empty } from 'asterui'

function App() {
  return (
      <Empty />
    )
}

export default App

自定义描述

带自定义描述文本的空状态。

</>

No data available

import { Empty } from 'asterui'

function App() {
  return (
      <Empty description="No data available" />
    )
}

export default App

自定义图片

带自定义图片或图标的空状态。

</>

No files found

import { Empty } from 'asterui'

function App() {
  return (
      <Empty
        image={
          <svg className="w-16 h-16 text-base-content/30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
          </svg>
        }
        description="No files found"
      />
    )
}

export default App

带操作按钮

带操作按钮的空状态。

</>

No items in your cart

Start Shopping

import { Empty, Button } from 'asterui'

function App() {
  return (
      <Empty description="No items in your cart">
        <Button color="primary">Start Shopping</Button>
      </Empty>
    )
}

export default App

简单图片

带较小图片的最小空状态。

</>

No results

import { Empty } from 'asterui'

function App() {
  return (
      <Empty
        image={Empty.PRESENTED_IMAGE_SIMPLE}
        description="No results"
      />
    )
}

export default App

API

Empty

属性	描述	类型	默认值
description	作为描述显示的文本或节点	React.ReactNode	'No Data'
image	自定义图片或图标；设置为 null 隐藏	React.ReactNode	Empty.PRESENTED_IMAGE_DEFAULT
imageStyle	应用于图片容器的样式	React.CSSProperties	-
children	额外内容，如按钮或操作	React.ReactNode	-
className	额外的 CSS 类名	string	-
data-testid	组件的测试 ID	string	'empty'