Todos los componentes (204)

Apilado

Maquetación · Stack · .amset-stack

Qué es y cuándo usarlo

Apila o pone en fila con una separación de la escala. Es la colocación que se usa a todas horas: Text y Title nacen con margin: 0 a propósito, y el espacio entre ellos lo pone quien coloca. Aquí van juntos lo que otras bibliotecas separan en «Stack» y «Group»: es el mismo flex cambiando direction.

Las demás piezas de maquetación tienen su propia ficha: Grid (Rejilla), Container (Contenedor), Center (Centrado), AspectRatio (Proporción) y ScrollArea (Área desplazable).

Cuándo usarlo

Separar los bloques de una tarjeta, un formulario o un panel sin márgenes sueltos. gap va de none a xl y sale de la escala de espacio.
direction="row" para ponerlos en fila: con justify="between" y align="center" es la cabecera de siempre, el título a un lado y lo demás al otro. wrap deja que la fila pase a la línea siguiente en vez de comprimirse.
as pinta el elemento que toque (section, header, nav…) sin envolverlo en otro div.

Cuándo no

Tarjetas que se reparten el ancho en columnas y bajan de fila: Grid.
El ancho de lectura de una página: Container.

Lo que NO hay, a propósito: no existe un Box con props de estilo sueltas (p, mt, bg). Otras bibliotecas lo tienen porque su sistema entero se apoya en props de estilo; el de esta casa dice lo contrario —el aspecto fino va en variables CSS— y meterlo sería abrir justo esa puerta.

Teclado: no participa: solo coloca. El orden de tabulación es el del código, también en fila.

Accesibilidad: no añade ningún papel: el que lleve lo da el elemento de as. No hay order ni direcciones invertidas, así que el lector y el tabulador recorren lo mismo que se ve.

Aspecto fino: --amset-stack-gap, la separación; gap la fija desde la escala.

Cómo se ve

ActivoPendiente

En una fila, separados.

<Stack direction="row" gap="md" align="center">
  <Tag tone="success">Activo</Tag>
  <Text>En una fila, separados.</Text>
</Stack>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`align`	`StackAlign`	—
`as`	`"article" \| "aside" \| "div" \| "footer" \| "header" \| "main" \| "nav" \| "section" \| "span"`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`direction`	`"column" \| "row"`	`column` (por defecto) apila; `row` pone en fila.
`gap`	`"sm" \| "md" \| "lg" \| "none" \| "xs" \| "xl"`	—
`justify`	`StackJustify`	—
`style`	`CSSProperties`	—
`wrap`	`boolean`	En fila, deja que pase a la linea siguiente en vez de comprimir.

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-stack-gap`	`var(--amset-space-4)`

Cómo se cambia

.amset-stack {
  --amset-stack-gap: ...;
}

En el banco de pruebas

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