筛选胶囊 <FilterChips />
上方一排筛选胶囊（带计数），下方 4–12 张小卡片；每按一次 → 选中下一个胶囊，属于它的卡片描边保留，其余变灰。一张卡可以属于多个胶囊。
Template and style descriptions are currently available in Chinese only.
- Group
- 分类 · 一组东西按标签筛
- Component
FilterChips·#filter-chips- Interaction
- 配 build: 'focus'：每按一次 → 切到下一个筛选，非本类卡片变灰
Good for
- 一组条目有交叉分类，想逐个说明“这一类有哪些”
- 条目多但每个只要一句话
Avoid when
- 分类互不重叠且只有两三类：用 Matrix 或 IconGrid 分组
- 条目要详细说明：拆页
Content limits
| 1 | chips 2–6 个，每个 ≤ 6 字或 ≤ 10 个拉丁字符 |
| 2 | cards 4–12 张（每行 4 张）；title ≤ 16 个拉丁字符或 ≤ 8 字；desc ≤ 22 字（12 张时 ≤ 16 字） |
| 3 | in 写胶囊下标，至少 1 个 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名，2–8 字 |
title · required | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
chips · required | string[] | 筛选胶囊 |
cards · required | { title, desc?, icon?, in: number[] }[] | 卡片和所属胶囊 |
active | number | 完整状态选中的胶囊，默认 -1（全部点亮） |
Example
<FilterChips kicker="按需挑选" title="同一个桌面，两种做法" chips={['Atomic', 'Spins', '平铺窗口']} cards={[{ title: 'Silverblue', desc: '基于 GNOME', in: [0] }, …]} />