Vox Mente
Navegação

Componentes

Aspect Ratio

beta

Trava a proporção de um bloco para o layout não pular quando a mídia carrega.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/aspect-ratio

Playground
Capa da trilha
<AspectRatio ratio={16 / 9}>
  <div className="bg-muted">Capa da trilha</div>
</AspectRatio>

Uso

Trava a proporção de um espaço antes do conteúdo carregar. A miniatura de uma sessão gravada não pode pular de tamanho quando o vídeo termina de carregar.
16 / 9

Proporções comuns

`ratio` é um número, não uma string — passe a divisão direto (`16 / 9`, `4 / 3`, `1`). Capa de trilha costuma ser quadrada; miniatura de vídeo, 16/9.
1 / 1
4 / 3
9 / 16

Com legenda sobreposta

O componente só fixa a proporção — ele não centraliza nem recorta o filho. Posicione a legenda com `absolute` dentro do bloco, do jeito que a própria demonstração faz.

Trilha de leitura · aula 4

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

AspectRatio

PropTipoPadrão
ratio*number—

Também aceita as props de React, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css