Ravox KitSuperfícies
Proporção
Segura imagem, vídeo ou iframe numa proporção fixa, então nada pula quando a mídia chega. Mostra um marcador enquanto carrega, faz a mídia entrar com um fade curto e avisa quando ela falha.
Ajustes
Razão
Ajuste
Exemplos
Marcador enquanto carrega
Vídeo em 16/9
Grade de miniaturas quadradas
Retrato, mídia inteira
Instalação
O shadcn cria components/ui/proporcao.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/proporcao.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| razao | number | `${number}/${number}` | 16 / 9 | Largura dividida pela altura: 16 / 9, "4/3", 1. |
| ajuste | "cobrir" | "conter" | "cobrir" | Corta a mídia para preencher, ou mostra ela inteira com faixas. |
| marcador | ReactNode | false | — | Troca o marcador de carregamento (um <Esqueleto />, a cor média da foto). false tira. |
| erro | ReactNode | "Mídia indisponível" | O que aparece se a <img> ou o <video> falhar. |
| ...props | ComponentProps<"div"> | — | Tudo o que um <div> aceita. A <img>, o <video> ou o <iframe> vão como filho direto. |