logo
简体中文

导航菜单

文档

EmptyState

简介

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

案例

没有数据

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

任务完成

所有任务都已成功完成。

没有用户

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

---



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

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

---



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

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

---



import { Button, EmptyState } 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>

Props

description

用于描述空状态的补充说明文本，显示在标题下方。

没有数据

尝试调整筛选条件或稍后再试。

---



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

<EmptyState title="没有数据" description="尝试调整筛选条件或稍后再试。" />

icon

在标题上方显示的图标名称，支持库内图标映射。

没有用户

创建你的第一个用户以开始吧。

未找到结果

尝试调整筛选条件或关键字。

暂无权限

请联系管理员为你授予访问权限。

暂无内容

稍后再来查看或创建新内容。

---



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

<EmptyState
  icon="UsersIcon"
  title="没有用户"
  description="创建你的第一个用户以开始吧。"
/>

---



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

<EmptyState
  icon="SearchIcon"
  title="未找到结果"
  description="尝试调整筛选条件或关键字。"
/>

---



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

<EmptyState
  icon="WarningIcon"
  title="暂无权限"
  description="请联系管理员为你授予访问权限。"
/>

---



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

<EmptyState
  icon="InfoIcon"
  title="暂无内容"
  description="稍后再来查看或创建新内容。"
/>

title

空状态的主标题，用于明确当前状态与意图。

没有数据

---



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

<EmptyState title="没有数据" />

Slots

default

用于放置操作按钮或引导操作的内容（例如“创建”“返回”等）。

没有数据

---



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

<EmptyState title="没有数据">
  <button
    style="background:#111827;color:#fff;border:none;border-radius:0.375rem;padding:0.5rem 1rem;cursor:pointer;"
    >创建</button
  >
</EmptyState>

搜索