跳到正文
册页

网站

Recovery - 恢复状态

加载中、内容不可用和页面缺失状态,以及相应的恢复操作。

用法

什么时候用它

说明当前状态,并提供一个确实可用的后续操作。

来自@misoto22/folio/website

TSX
import { RecoveryState } from '@misoto22/folio/website'

说明

由设计系统错误状态基础组件和调用方提供的目的地组成的恢复页面。

实践建议

推荐

  • 提供本地化标签、含义明确的链接和有用的图片替代文本。

避免

  • 不要在展示组件中放入服务凭据、路由逻辑或后端模型。

示例

缺失条目的恢复入口

缺失条目状态会说明原因,并给出明确的目的地。恢复链接由应用传入,因此可以使用任意路由方案。

This record is unavailable

The entry may have moved or been removed.

组成部分

在调用处组合,而不是通过 props 配置——所以这个组件没有预料到的布局,依然表达得出来。

RecoveryLinks

建议访问的目的地,路由由应用提供。

RecoveryLinks props
属性类型默认值说明
items必填{ id: string; link: ReactElement }[]
label必填string

LoadingRouteIntro

使用基础加载组件绘制共用的页面标题布局。

LoadingRouteIntro props
属性类型默认值说明
titleClassNamestring'w-[min(100%,18rem)]'

LoadingRecords

内容集合的骨架屏,可带媒体栏或省略媒体栏。

LoadingRecords props
属性类型默认值说明
mediabooleantrue
rowsnumber4

WebsiteLoading

为网站可复用页面结构提供具名加载布局。

WebsiteLoading props
属性类型默认值说明
label必填string
filtersbooleanfalse
layout'records' | 'gallery' | 'media' | 'metrics' | 'identity''records'
mediabooleantrue
rowsnumber4
titleClassNamestring