Todos los componentes (204)

Contenedor

Maquetación · Container · .amset-container

Qué es y cuándo usarlo

Centra el contenido en horizontal y le pone un ancho máximo de lectura, con un relleno a los lados para que el texto no toque el borde de la pantalla.

Cuándo usarlo

El cuerpo de una página o de una sección: que una línea de texto no se estire hasta los 1.900 px de un monitor ancho.
width elige el ancho máximo: sm (32 rem), md (48 rem), lg (64 rem, por defecto) o xl (80 rem). full no limita el ancho y solo pone el relleno lateral.
bare quita el relleno lateral, para cuando ya lo pone lo de fuera (un Card, otro contenedor).
as pinta el elemento que toque: as="main" lo convierte en la región principal de la página sin envolverlo en otro div.

Cuándo no

El armazón de la aplicación, con cabecera y menú lateral: AppShell.
Centrar algo pequeño dentro de un hueco, también en vertical: Center.
Separar los bloques de dentro: eso lo hace Stack; el contenedor solo pone el ancho.

Teclado: no participa: solo coloca.

Accesibilidad: no añade ningún papel: el que lleve lo da el elemento de as. Por debajo de su ancho máximo ocupa el 100 % del hueco, así que en un móvil no obliga a desplazarse de lado.

Aspecto fino: los anchos, --amset-container-sm … --amset-container-xl; el que se aplica, --amset-container-width; y el relleno lateral, --amset-container-padding (0px con bare).

Cómo se ve

Un bloque de texto con el ancho acotado para que se lea comodo.

<Container width="sm">
  <Text>Un bloque de texto con el ancho acotado.</Text>
</Container>

Props

Se importa con import { Container } 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"`	—
`bare`	`boolean`	Sin relleno lateral, para cuando ya lo pone lo de fuera.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`style`	`CSSProperties`	—
`width`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	Ancho maximo del contenido. `full` no limita, solo pone el relleno lateral.

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

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-container-sm`	`32rem`
`--amset-container-md`	`48rem`
`--amset-container-lg`	`64rem`
`--amset-container-xl`	`80rem`
`--amset-container-width`	`var(--amset-container-lg)`
`--amset-container-padding`	`var(--amset-space-4)`

Cómo se cambia

.amset-container {
  --amset-container-sm: ...;
  --amset-container-md: ...;
}

En el banco de pruebas

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