FanGallery

<r-fan-gallery>APITokens de estiloÁrea de testesCódigo-fonte

Abre os seus filhos em leque como uma mão de cartas. Cada filho gira em torno de um ponto abaixo da linha, por isso o grupo lê-se como um único objeto e não como uma faixa.

Use quando algumas capas, capturas de ecrã ou cartões devem ler-se como um conjunto, e mostrar cada um por inteiro importa menos do que mostrar que há vários. Para conteúdo que o leitor precise de comparar lado a lado, use uma grelha.

Início 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>

Os filhos são os seus próprios elementos. Links, botões e imagens mantêm os seus papéis, os seus nomes e o seu lugar na ordem de tabulação; a galeria apenas os move.

Abertura

spread é o ângulo em graus entre o primeiro e o último filho. 0 deixa-os todos empilhados uns sobre os outros.

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

Movimento

• Abertura. Até a galeria entrar na vista pela primeira vez, os filhos ficam empilhados, por isso o da frente é legível desde o início. Quando chega, o leque abre com uma mola, um filho após o outro. Abre uma vez por página; sair e voltar com o scroll não o repete.
• Ponteiro e foco. O filho sob o ponteiro, ou com o foco, levanta-se e passa para a frente, e os vizinhos rodam um pouco para o lado. A resposta é imediata, e um gesto novo continua a partir de onde o anterior tinha chegado.
• Movimento reduzido. Com prefers-reduced-motion: reduce o leque está aberto desde o início e cada alteração é aplicada sem transição.

Referência da API

Propriedades

Partes

Estilos

A galeria tem a altura do seu filho mais alto. Os cantos rodados ultrapassam o stage, por isso deixe espaço à volta ou aumente --ran-fan-gallery-padding.

Área de testes