数九 <NinesDial />

一排数字格拼出 99.9…%，每按一次 → 点亮下一组九，下方出现这一组的说明。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group: 数字 · 解释“几个九”
Component: NinesDial · #nines-dial
Interaction: build: reveal 时每步点亮一组九和对应说明

Good for

解释耐久度、可用性这类“几个九”的指标
对比不同档位各有几个九

Avoid when

普通百分比：用 BigStat 或 Gauge
数字不是全 9：用 Odometer

Content limits

1	nines 2–11
2	caption ≤ 12 字
3	marks 2–4 步，upto 递增且最后一步 = nines；label ≤ 10 字，note ≤ 36 字

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`nines` · required	`number`	9 的个数
`caption` · required	`string`	指标名
`marks` · required	`{ upto, label, note }[]`	分组点亮

Example

<NinesDial kicker="耐久度" title="…" nines={11} caption="设计耐久度" marks={[{ upto: 4, label: '四个九', note: '…' }, { upto: 11, label: '十一个九', note: '…' }]} />