EmptyState 空状态

解释无内容的原因并提供能改变现状的下一步。

Beta

示例

直接操作示例,查看组件在具体任务中的状态与反馈。

初始筛选没有匹配结果;清除本地筛选后恢复确定性的组件列表。
目录范围公开组件
成熟度筛选Stable
匹配结果0 个
组件目录结果
没有匹配的组件
当前筛选条件过于严格。清除成熟度筛选后,可查看公开目录中的全部组件。
筛选已应用,当前没有匹配结果。
明确说明内容存在但当前筛选没有结果,并提供恢复入口。
筛选结果
没有匹配结果
尝试缩短关键词或移除状态筛选。
初始为空与错误恢复使用不同文案和下一步动作。
尚无内容
还没有项目
创建第一个项目开始整理内容。
内容不可用
无法载入项目
保留当前条件并重新尝试。

使用建议

解释为什么没有内容

区分首次使用、搜索无结果、权限不足和数据错误,避免一律写成“暂无数据”。

下一步必须改变现状

操作应能创建内容、清除筛选或申请权限;如果没有合理操作,可以省略 actions。

文案跟随当前范围

说明当前页面或筛选范围,长说明保持一到两句,并把复杂帮助链接放到邻近区域。

引入方式

从已验证的公开子路径导入组件;全局样式接入方式见安装指南。

import { BaseEmptyState } from '@inf-monkeys-tech/monkeys-design/components/base';

当前限制

  • EmptyState 不会自动成为实时通知区域;如果空状态由异步结果触发,宿主需决定是否及如何宣告变化。
  • Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
export interface BaseEmptyStateProps
  extends Omit<
    HTMLAttributes<HTMLDivElement>,
    'children' | 'className' | 'style' | 'title'
  > {
  icon?: ReactNode;
  title?: ReactNode;
  description?: ReactNode;
  actions?: ReactNode;
  appearance?: BaseAppearance;
  className?: string;
  classNames?: BaseStateClassNames;
  style?: CSSProperties;
}
属性说明类型默认值
icon显示在主要内容旁的图标。ReactNode
title空状态显示的主标题。ReactNode
description用于补充标题或标签含义的说明内容。ReactNode
actions在主要内容旁呈现的一组操作。ReactNode
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance
className追加到组件根元素的 CSS 类名。string
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseStateClassNames
style追加到组件根元素的内联样式。CSSProperties