示例
直接操作示例,查看组件在具体任务中的状态与反馈。
本地校验任务
正在整理公开组件资料
正在校验 API、示例源码与搜索索引。任务耗时取决于待处理组件数量。
简短等待
正在保存
带说明
正在生成预览
这通常需要几秒钟,完成后会自动更新。
导出任务
正在准备导出文件
可以继续等待,或取消这次本地任务。
使用建议
用于未知时长任务
当总量不可计算但任务确实进行中时使用 LoadingState,并在 title 中说明正在处理什么。
保持一次清晰宣告
默认 status 与 polite live 适合非阻塞加载;不要在频繁更新的父容器重复创建状态节点。
为长任务提供退出路径
超过短暂等待的任务应由宿主提供取消、后台运行或查看详情等真实操作。
引入方式
从已验证的公开子路径导入组件;全局样式接入方式见安装指南。
import { BaseLoadingState } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- LoadingState 只管理组件内部默认本地化和状态语义;任务取消、超时、重试及错误恢复由宿主业务负责。
- Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseLoadingStateProps
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 | — |