← 全部模板

文件夹叠卡 <FolderCards />

几只文件夹叠在一起,页签错开排列;最前面的展示标题、说明、要点和一张真实截图。配合逐条展开 focus 时,每按一次 → 下一只翻到最前。

在示例演示里查看 →

分组
内容 · 3–4 个项目,一次看一个
组件
FolderCards · #folder-cards
交互
build 设为 focus:当前文件夹翻到最前。

适合

  • 3–4 个项目或模块,要逐个讲
  • 每个都有截图

不适合

  • 要并排比较:用 PanelCards
  • 超过 4 个

内容上限

1items 3–4 个:tab ≤ 10 字符,title ≤ 14 字,body ≤ 60 字,points 0–3 条各 ≤ 16 字
2src 必须是真实截图

字段

字段类型
kicker · 必填string小节名,2–8 字
title · 必填string | string[]标题;数组手动断行
leadstring一两句导语,≤ 60 字
sourcestring事实出处
items · 必填{ tab?, title, body, points?, src?, alt?, file? }[]文件夹

示例代码

<FolderCards
  kicker="三种视图"
  title="一个文件夹一个入口"
  items={[{ tab: 'KIT', title: '组件库', body: '…', src: kitEntry, alt: '…', file: 'ENTRY.WEBP' }, …]}
/>