StatusIllustration 状态插图
一组语义状态插图（empty / search / upload / success / 404 / 403 / 500 等），与 token 联动。
基础用法
10 种 variant，统一主体（窗口 + 阴影），每种 variant 添加专属辅助元素与配色。
默认作为装饰图（aria-hidden），传 title 后变可访问图（含 <title>）。
empty
search
upload
success
info
warning
error
not-found
forbidden
server-error
<CfStatusIllustration variant="empty" />
<CfStatusIllustration variant="search" />
<CfStatusIllustration variant="upload" />
<CfStatusIllustration variant="success" />
<CfStatusIllustration variant="not-found" /><CfStatusIllustration variant="empty" />
<CfStatusIllustration variant="search" />
<CfStatusIllustration variant="upload" />
<CfStatusIllustration variant="success" />
<CfStatusIllustration variant="not-found" />3 档尺寸
size 控制 illustration 比例。常用 sm 在 inline 提示，md 默认，lg 在整页 Result。
size = sm
size = md
size = lg
<CfStatusIllustration size="sm" />
<CfStatusIllustration size="md" />
<CfStatusIllustration size="lg" /><CfStatusIllustration size="sm" />
<CfStatusIllustration size="md" />
<CfStatusIllustration size="lg" />API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | 'empty' | 'search' | 'upload' | 'success' | 'info' | 'warning' | 'error' | 'not-found' | 'forbidden' | 'server-error' | 'empty' | 状态语义 |
size | 'sm' | 'md' | 'lg' | 'md' | |
title | string | — | 传入即可访问；不传则装饰图 |
反馈与讨论
StatusIllustration 状态插图 的讨论