← 全部模板

状态网格 <StatusGrid />

6–10 张小卡片,每张一个名字和一个状态标签(支持 / 新增 / 部分 / 不支持,名称可改),顶部图例统计每种状态的数量。

分组
现状 · 一组对象各自的状态
组件
StatusGrid · #status-grid
交互
卡片依次淡入;悬停时抬起。

适合

  • 架构、平台、职能、模块等一组对象的支持或就绪状态
  • 想让听众一眼数出“几个好、几个有问题”

不适合

  • 每个对象要比较多个维度:用 Matrix
  • 状态只有两种且对象少于 4 个:用 VerdictColumns

内容上限

1tiles 6–10 张;6 张 3 列,7–8 张 4 列,9–10 张 5 列
2name ≤ 10 个字符(等宽显示);sub ≤ 12 字
3note ≤ 24 字,只给“部分”“不支持”写原因
4labels 每个 ≤ 4 字

字段

字段类型
kicker · 必填string标题上方的小节名,2–8 字
title · 必填string | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <kbd>
tiles · 必填{ name, sub?, status: 'ok'|'new'|'partial'|'off', note? }[]卡片
labelsPartial<Record<Status, string>>为本页重命名四种状态,如 { ok: "就绪", off: "阻塞" }

示例代码

<StatusGrid
  kicker="架构支持"
  title="七个官方架构,riscv64 首次加入"
  labels={{ ok: '官方支持', new: '首次支持', partial: '受限', off: '已移除' }}
  tiles={[
    { name: 'amd64', sub: '64 位 x86', status: 'ok' },
    { name: 'riscv64', sub: '64 位 RISC-V', status: 'new', note: '首个正式支持的版本' },
    { name: 'i386', sub: '32 位 x86', status: 'partial', note: '无官方内核和安装器' },
    { name: 'mipsel', sub: '32 位 MIPS', status: 'off', note: '不再受支持' },
  ]}
  source="aurora 发行说明 §2.1 · §5.1"
/>