FanGallery 扇形画廊

<r-fan-gallery>API样式变量试玩源码

把子元素像一手牌那样扇形摊开。每个子元素都绕着行下方的同一个点旋转，整组看上去是一个整体，而不是一排并列的卡片。

适用场景：几张封面、截图或卡片要作为一组来看，而且"有好几张"比"每张都看全"更重要。如果读者需要把内容并排对比，请改用网格。

快速开始

基础用法

<r-fan-gallery>
  <a href="/one">1</a>
  <a href="/two">2</a>
  <a href="/three">3</a>
  <a href="/four">4</a>
</r-fan-gallery>

子元素就是你自己的元素。链接、按钮和图片保留原有的角色、名称和 Tab 顺序，画廊只负责移动它们。

展开角度

spread 是第一个和最后一个子元素之间的夹角，单位为度。设为 0 时所有子元素叠在一起。

<r-fan-gallery spread="48">…</r-fan-gallery>

动效

• 展开。 画廊第一次滚入视口之前，子元素叠成一摞，最前面那张从一开始就能看清。进入视口后，扇面以弹簧动效依次展开。每个页面只展开一次，滚走再滚回来不会重放。
• 指针与焦点。 指针下方或持有焦点的子元素会抬起并移到最前，相邻的子元素稍稍向两侧让开。响应是即时的，新的手势会从上一个手势停下的位置接着走。
• 减少动态效果。 在 prefers-reduced-motion: reduce 下，扇面一开始就是展开的，所有变化都直接生效，没有过渡。

API 参考

属性

Part

样式

画廊的高度等于最高的子元素。旋转后的卡角会超出 stage，所以要在它四周留出空间，或者调大 --ran-fan-gallery-padding。

试玩