EmptyState

简介

EmptyState 组件用于在页面或区块没有数据时提供清晰的视觉反馈，可以引导用户进行下一步操作。

基础用法

展示了组件的基础功能，包括基本用法、带图标的提示和包含操作按钮的引导。

没有数据

当前没有任何可用数据显示。

任务完成

所有任务都已成功完成。

没有用户

系统中还没有任何用户，您可以立即创建一个。

---
import { EmptyState } from '@coffic/cosy-ui';
---

<EmptyState title="没有数据" description="当前没有任何可用数据显示。" />

没有数据

当前没有任何可用数据显示。

任务完成

所有任务都已成功完成。

没有用户

系统中还没有任何用户，您可以立即创建一个。

---
import { EmptyState } from '@coffic/cosy-ui';
---

<EmptyState
  title="任务完成"
  description="所有任务都已成功完成。"
  icon="CheckCircle"
/>

没有数据

当前没有任何可用数据显示。

任务完成

所有任务都已成功完成。

没有用户

系统中还没有任何用户，您可以立即创建一个。

---
import { EmptyState, Button } from '@coffic/cosy-ui';
---

<EmptyState
  icon="users"
  title="没有用户"
  description="系统中还没有任何用户，您可以立即创建一个。">
  <Button class="cosy:btn-primary">创建新用户</Button>
  <Button>返回首页</Button>
</EmptyState>

自定义样式

EmptyState 组件本身不包含复杂的样式，但可以轻松地放置在任何容器中，并继承父元素的文本颜色。

在深色背景下

该组件能很好地适应不同的背景颜色。

---
import { EmptyState } from '@coffic/cosy-ui';
---

<div class="cosy:bg-base-200 cosy:p-8 cosy:rounded-lg">
  <EmptyState
    title="在深色背景下"
    description="该组件能很好地适应不同的背景颜色。"
    class="cosy:text-neutral-content"
  />
</div>