@ug666/react 文档演示

EmptyState 空状态

EmptyState 用于无数据、无结果或首次进入页面时的引导展示。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { EmptyState } from '@ug666/react'

变体预览

无数据与无搜索结果两类常见场景。

暂无项目

当前空间还没有任何项目，先创建一个开始吧。

没有匹配结果

请尝试更换筛选条件或关键字。

状态展示

适合首次空状态与搜索空状态。

可配合 action 引导用户继续操作。

尺寸展示

通过容器尺寸控制空状态在页面中的占比。

卡片级空状态

页面级空状态

代码示例

推荐明确告诉用户为什么为空以及下一步做什么。

import { Inbox } from 'lucide-react'
import { Button, EmptyState } from '@ug666/react'

export function EmptyProjects() {
  return (
    <EmptyState
      icon={Inbox}
      title="暂无项目"
      description="当前空间还没有任何项目，先创建一个开始吧。"
      action={<Button>新建项目</Button>}
    />
  )
}

Props 说明

属性	类型	默认值	说明
icon	LucideIcon	—	空状态顶部图标。
title	string	—	空状态标题。
description	string	—	补充说明文案。
action	ReactNode	—	按钮或操作入口。