Aspect Ratio
Restringe o conteúdo filho a uma proporção largura por altura fixa.
Instalação
Recebe correções por update de versão. O caminho recomendado.
npm i @trdr/ui
import { AspectRatio } from "@trdr/ui/aspect-ratio"Uso
import { AspectRatio } from "@trdr/ui/aspect-ratio"
export function Exemplo() {
return <AspectRatio />
}Props
AspectRatioPropsestende React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>Quando usar
Use o AspectRatio para reservar o espaco de uma imagem, video, grafico ou thumbnail antes do
conteudo carregar, evitando o salto de layout (CLS) quando o recurso chega. Tambem serve para
forcar um recorte consistente (16:9, 1:1, 4:3) numa grade de cartoes onde cada item precisa
ocupar a mesma proporcao independente do tamanho real da midia.
Quando nao usar
Nao use para conteudo de texto ou de tamanho variavel: forcar uma proporcao fixa em algo que
deveria crescer com o conteudo corta texto ou cria espaco vazio. Nao use como substituto de
max-width/max-height simples quando a unica necessidade e limitar tamanho, sem exigir uma
proporcao especifica.
Anatomia
AspectRatio(data-slot="aspect-ratio"): a raiz, um<div>que calcula a altura a partir da largura disponivel e da propratio. O unico estilo que a raiz aplica eoverflow-hidden, para o filho nao vazar da caixa; cor, borda e raio ficam por conta doclassNamedo consumidor.- O conteudo filho normalmente preenche a caixa inteira (
className="h-full w-full", como uma imagem comobject-cover), mas isso e responsabilidade de quem usa o componente, nao dele.
Acessibilidade
O AspectRatio nao introduz papel nem estado de acessibilidade proprio: ele e um <div> de
layout. A responsabilidade de acessibilidade (texto alternativo de imagem, aria-label de video,
etc.) e inteiramente do conteudo filho.
Slots e tokens
Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.
[data-slot="aspect-ratio"]