Exibição
Aspect Ratio
Container que mantém uma proporção fixa (aspect ratio).
Uso
Use o elemento <y-aspect-ratio> no seu HTML:
html
<y-aspect-ratio ratio="16/9"> <img src="/placeholder.jpg" alt="Imagem" style="object-fit: cover; width: 100%; height: 100%;" /></y-aspect-ratio>Exemplos
16:9
16:9
Propriedades
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
ratio | string | "16/9" | Proporção (ex: 16/9, 4/3, 1/1) |
Importação
Importe todos os componentes ou apenas este:
typescript
// Importar tudoimport '@yampi/ui';// Importar apenas este componenteimport '@yampi/ui/dist/components/aspect-ratio.js';Acessibilidade
- Suporta navegação por teclado
- Utiliza atributos ARIA apropriados
focus-visiblepara indicação de foco