版本挑选器 <EditionPicker />

3–6 张单选卡片（每行 3 张）：图标、小标签、名称、说明和底部“适合”一行；右上角是单选圆点。选中的卡片描强调色边并打勾，每按一次 → 选中下一张。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group: 选项 · 几个版本 / 方案逐个介绍
Component: EditionPicker · #edition-picker
Interaction: 配 build: 'focus'：每按一次 → 选中框移到下一张卡片

Good for

产品的几个版本、套餐、发行版本，各有用途
想逐个讲“这一个适合谁”

Avoid when

有价格要比：用 PricingTiers
选项超过 6 个：拆页或用 FilterChips

Content limits

1	options 3–6 个
2	name ≤ 12 个拉丁字符或 ≤ 8 字；tag ≤ 6 字
3	desc ≤ 40 字（6 个时 ≤ 30 字）
4	fit ≤ 24 字（6 个时 ≤ 14 字）

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`options` · required	`{ name, icon?, tag?, desc, fit? }[]`	选项卡片
`selected`	`number`	完整状态选中的卡片，默认 0
`fitLabel`	`string`	“适合”一行的标签，默认“适合”

Example

<EditionPicker kicker="Editions" title="六个正式版本" options={[{ name: 'Workstation', icon: 'laptop', tag: '桌面', desc: '搭载最新 GNOME 桌面的版本。', fit: '笔记本和台式机' }, …]} />