Todos los componentes (204)

Centrado

Maquetación · Center

Qué es y cuándo usarlo

Centra lo que lleva dentro, en horizontal y en vertical. Para el hueco de una carga, un panel todavía vacío o un mensaje en medio de una zona.

Cuándo usarlo

Un Spinner mientras carga una sección, o un texto corto en un hueco que aún no tiene contenido.
minHeight le da alto a la caja (una longitud CSS: 10rem, 50vh): sin alto no hay nada que centrar en vertical.
vertical={false} centra solo en horizontal. Así minHeight no se aplica, porque el alto solo hace falta para centrar en vertical.
as pinta el elemento que toque en vez del div.

Cuándo no

Un estado vacío con icono, título, explicación y acción: EmptyState, que ya trae su propia colocación.
El ancho de lectura de una página: Container.
Colocar varias piezas con separación: Stack, con align="center" y justify="center" si hace falta.

Teclado: no participa: solo coloca.

Accesibilidad: no añade ningún papel ni cambia el orden de lo de dentro. Lo que se anuncia lo dice la pieza de dentro, no el centrado: Spinner es una barra de progreso con su nombre («Cargando los pedidos»), y un «Sin resultados» que aparece tiene que ir en un role="status" para que se oiga.

Aspecto fino: --amset-center-min, el alto mínimo con el centrado vertical; lo escribe minHeight en línea.

Cómo se ve

<Center minHeight="10rem">
  <Spinner label="Cargando los pedidos" />
</Center>

Props

Se importa con import { Center } 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.
`minHeight`	`string`	Alto minimo, para centrar dentro de un hueco que aun no tiene contenido.
`style`	`CSSProperties`	—
`vertical`	`boolean`	Centra tambien en vertical. Necesita que la caja tenga alto.

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: