← 全部模板

胶片条 <FilmStrip />

一条黑色底片横贯页面,上下有齿孔,每格一张图并在角上印年份;格子下方是编号说明。未出现的格子像未显影的底片。

在示例演示里查看 →

分组
时间线 · 3–5 个节点配图
组件
FilmStrip · #film-strip
交互
build:每一格“显影”并显示说明

适合

  • 按时间或步骤排列的 3–5 个节点,每个都有一张图
  • 回顾、历史、演变

不适合

  • 节点超过 5 个:用 Timeline
  • 没有配图:用 Milestones

内容上限

1title ≤ 1 行 × 18 字
2lead ≤ 50 字
3frames 3–5 格:label ≤ 8 字,mark ≤ 6 个字符

字段

字段类型
kicker / title / lead / sourceSlideBase同通用字段
frames · 必填{ image, label, mark? }[]底片格,图片和说明同一步出现

示例代码

<FilmStrip kicker="时间线" title="四次全球白化" frames={[{ image: { src: a, alt: '…' }, label: '约 21% 的礁区', mark: '1998' }, …]} />