React 组件

UGEmptyState 空状态

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGEmptyState } from '@ug666/ui-react'

变体预览

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

暂无项目

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

没有匹配结果

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

状态展示

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

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

尺寸展示

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

卡片级空状态

页面级空状态

代码示例

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

tsx

import { Inbox } from 'lucide-react'
import { UGButton, UGEmptyState } from '@ug666/ui-react'

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

Props

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