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