空状态 Empty

Empty 组件用于展示空状态提示，通常用于数据为空或没有结果时显示自定义的占位图标和描述。

---

📦 引入方式

import { Empty } from '@npmqg/react-ui-core';

---

🧩 使用示例

📚 基本示例

示例

📭

暂时没有数据

源码

<Empty
  image={<div className="text-6xl">🔒</div>} // 自定义图标
  description="没有数据可显示"
>
  <button className="btn">重新加载</button>
</Empty>

📚 带自定义图标和描述

示例

📊

无数据可显示

源码

<Empty image={<div className="text-6xl">📊</div>} description="无数据可显示">
  <button className="btn">刷新</button>
</Empty>

📚 带自定义图标、描述和子组件

示例

📦

当前没有订单

源码

<Empty image={<div className="text-6xl">📦</div>} description="当前没有订单">
  <button className="btn">创建订单</button>
</Empty>

---

🧩 Props

属性	类型	默认值	说明
image	React.ReactNode	📭（默认图标）	用于显示的自定义图标，如果没有传入，则默认显示 📭 图标。
description	React.ReactNode	'暂无数据'	用于描述的文本，表示当前空状态的说明。
children	React.ReactNode	null	可选的子元素，通常用于放置重试按钮或其他交互。
className	string	''	自定义外部容器的样式。

---

📦 依赖项

• Tailwind CSS（用于样式）
• cn 工具函数（通常为 clsx 或 classnames 封装）

---

⚡️ 使用场景

• 列表空状态：当列表为空时，显示该组件。
• 数据加载失败：当加载数据失败或数据尚未加载时，显示该组件提示用户。
• 搜索结果为空：在用户搜索没有结果时，使用该组件进行提示。

需要在页面中展示空数据状态时，Empty 组件能提供清晰、友好的用户提示。