← 全部模板

数字卡片行 <StatRow />

一排深色卡片,像手机小组件:右上角三个点,等宽小字标签,大数字,一句说明;第一张数字用强调色。下方可放一排名称胶囊。

分组
数据 · 3–4 个并列的规模数字
组件
StatRow · #stat-row

适合

  • 3–4 个同样重要的规模数字
  • 顺带列出用到的工具或合作方(只写名字)

不适合

  • 一个数字就是论点:用 BigStat
  • 要看趋势:用 SparkCards

内容上限

1stats 3–4 个:value ≤ 6 字符,label ≤ 12 字符,note ≤ 28 字
2names ≤ 8 个,只写文字,不放 logo

字段

字段类型
kicker · 必填string小节名,2–8 字
title · 必填string | string[]标题;数组手动断行
leadstring一两句导语,≤ 60 字
sourcestring事实出处
stats · 必填{ value, label, note }[]数字卡片
namesstring[]名称胶囊

示例代码

<StatRow
  kicker="规模"
  title="四个数说清这套模板"
  stats={[{ label: 'templates', value: '86', note: '…' }, …]}
  names={['React 19', 'Vite 8', 'motion']}
  source="src/kit/catalog.ts"
/>