网站
Recovery - 恢复状态
加载中、内容不可用和页面缺失状态,以及相应的恢复操作。
用法
什么时候用它
说明当前状态,并提供一个确实可用的后续操作。
来自@misoto22/folio/website
import { RecoveryState } from '@misoto22/folio/website'说明
由设计系统错误状态基础组件和调用方提供的目的地组成的恢复页面。
实践建议
推荐
- 提供本地化标签、含义明确的链接和有用的图片替代文本。
避免
- 不要在展示组件中放入服务凭据、路由逻辑或后端模型。
示例
缺失条目的恢复入口
缺失条目状态会说明原因,并给出明确的目的地。恢复链接由应用传入,因此可以使用任意路由方案。
组成部分
在调用处组合,而不是通过 props 配置——所以这个组件没有预料到的布局,依然表达得出来。
RecoveryLinks
建议访问的目的地,路由由应用提供。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | { id: string; link: ReactElement }[] | — | |
| label必填 | string | — |
LoadingRouteIntro
使用基础加载组件绘制共用的页面标题布局。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| titleClassName | string | 'w-[min(100%,18rem)]' | — |
LoadingRecords
内容集合的骨架屏,可带媒体栏或省略媒体栏。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| media | boolean | true | — |
| rows | number | 4 | — |
WebsiteLoading
为网站可复用页面结构提供具名加载布局。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | string | — | |
| filters | boolean | false | — |
| layout | 'records' | 'gallery' | 'media' | 'metrics' | 'identity' | 'records' | — |
| media | boolean | true | — |
| rows | number | 4 | — |
| titleClassName | string | — |