Todos los componentes (204)

Proporción

Maquetación · AspectRatio

Qué es y cuándo usarlo

Una caja con una proporción fija, ancho entre alto, que ocupa todo el ancho de su hueco. Lo de dentro la llena entera aunque no traiga tamaño propio.

Cuándo usarlo

Un vídeo incrustado, un mapa o un iframe: no traen tamaño propio, y sin una caja que les reserve el sitio la página salta cuando terminan de cargar.
ratio es la proporción tal y como se escribe en CSS: 16 / 9 (por defecto), 4 / 3, 1 para un cuadrado.
as pinta el elemento que toque en vez del div.

Cuándo no

Una IMAGEN: Thumbnail, que además trae el respaldo si falla, el recorte y la carga diferida.
Una zona que crece con su contenido: lo que no cabe en la proporción se recorta (overflow: hidden), así que no vale para texto de largo variable.

Teclado: no participa: solo da tamaño. Lo de dentro conserva el suyo (un iframe o un vídeo se enfocan como siempre).

Accesibilidad: reservar el sitio antes de que cargue evita que el contenido de debajo se mueva mientras se lee. El nombre de lo de dentro lo pone quien lo pinta: un iframe necesita su title y un vídeo, sus subtítulos.

Aspecto fino: --amset-ratio, la proporción; la escribe ratio en línea.

Cómo se ve

4/3

16/9

<AspectRatio ratio="16/9">
  <Card variant="flat">
    <Center>
      <Text ink="secondary">16/9</Text>
    </Center>
  </Card>
</AspectRatio>

Props

Se importa con import { AspectRatio } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`as`	`"article" \| "aside" \| "div" \| "footer" \| "header" \| "main" \| "nav" \| "section" \| "span"`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`ratio`	`string`	La proporcion, ancho entre alto: `16 / 9` se escribe `16 / 9`. Por defecto `16 / 9`.
`style`	`CSSProperties`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: