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>}
    />
  )
}

属性

属性	类型	默认值	说明
icon	LucideIcon	—	空状态顶部图标。
title	string	—	空状态标题。
description	string	—	补充说明文案。
action	ReactNode	—	按钮或操作入口。
size	'sm' \| 'md' \| 'lg'	'md'	控制留白、图标和文字层级。