Aspect Ratio
StableReserva a caixa que uma mídia vai ocupar antes de ela chegar, para que a página não reflua quando a imagem decodifica.
Instalação
npx up-web-ds add aspect-ratioPreview
Default
Ratios
Media
Loading
All states
Default
Ratios
Media
Loading
Usage
Props
Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).
prop obrigatória.
Composition
É uma caixa única: a proporção vem de `ratio` e o conteúdo preenche o espaço reservado. Não há subcomponentes — o que entra dentro dela mantém a própria semântica.
Metadata
Notas de acessibilidade
Não é interativo: não entra na sequência de tabulação, não tem estado e não anima, então teclado, alvo de toque e movimento não têm superfície onde falhar — verificado em navegador, onde a caixa não recebe tabindex e não declara transição nem animação sob prefers-reduced-motion: reduce. Leitor de tela verificado por teste: a caixa não assume papel nem nome, então o que é anunciado é só o conteúdo dentro dela; uma grade de mídia continua sendo uma grade de imagens em vez de virar uma grade de regiões aninhadas. Geometria verificada em navegador nos dois viewports: 16/9, 1/1, 3/4 e 21/9 medidos no layout real, e a proporção sobrevive à reflow para duas colunas em 375px. A mídia preenche a caixa de conteúdo com object-cover, recortando sem deformar.
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- layout
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / aspect-ratio
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Dependências
- Pacotes
- Nenhuma
- Ícones
- Nenhum
- Construído sobre
- Nenhum
- Usado por
- Nenhum ainda