FanGallery

<r-fan-gallery>APITokens de estiloPrueba interactivaCódigo fuente

Despliega sus hijos en abanico como una mano de cartas. Cada hijo gira alrededor de un punto situado bajo la fila, de modo que el grupo se lee como un solo objeto y no como una tira.

Úsalo cuando unas cuantas portadas, capturas o tarjetas deban leerse como un conjunto, y mostrar cada una entera importe menos que mostrar que hay varias. Para contenido que el lector deba comparar lado a lado, usa una cuadrícula.

Inicio rápido

Uso básico

<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>

Los hijos son tus propios elementos. Enlaces, botones e imágenes conservan sus roles, sus nombres y su lugar en el orden de tabulación; la galería solo los mueve.

Apertura

spread es el ángulo en grados entre el primer y el último hijo. Con 0 quedan todos apilados unos sobre otros.

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

Movimiento

• Apertura. Hasta que la galería entra en la vista por primera vez, sus hijos están apilados, así que el de delante se lee desde el principio. Al llegar, el abanico se abre con un resorte, un hijo tras otro. Se abre una vez por página; alejarse y volver con el scroll no lo repite.
• Puntero y foco. El hijo bajo el puntero, o el que tiene el foco, se eleva y pasa al frente, y sus vecinos se apartan un poco. La respuesta es inmediata, y un gesto nuevo continúa desde donde se había quedado el anterior.
• Movimiento reducido. Con prefers-reduced-motion: reduce el abanico está abierto desde el principio y cada cambio se aplica sin transición.

Referencia de la API

Propiedades

Partes

Estilos

La galería mide lo mismo que su hijo más alto. Las esquinas giradas desbordan el stage, así que deja espacio a su alrededor o aumenta --ran-fan-gallery-padding.

Prueba interactiva