示例
直接操作示例,查看组件在具体任务中的状态与反馈。
组件目录结果
没有匹配的组件
当前筛选条件过于严格。清除成熟度筛选后,可查看公开目录中的全部组件。
筛选结果
没有匹配结果
尝试缩短关键词或移除状态筛选。
尚无内容
还没有项目
创建第一个项目开始整理内容。
内容不可用
无法载入项目
保留当前条件并重新尝试。
使用建议
解释为什么没有内容
区分首次使用、搜索无结果、权限不足和数据错误,避免一律写成“暂无数据”。
下一步必须改变现状
操作应能创建内容、清除筛选或申请权限;如果没有合理操作,可以省略 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.
API
查看组件源码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 | — |