Todos los componentes (204)

Tablero

Datos · Board · .amset-board

Qué es y cuándo usarlo

Un tablero tipo kanban: columnas de tarjetas que pasan de una a otra (pendiente, en curso, en revisión, hecho). Se mueve arrastrando y con el teclado, que es la mitad que falta en casi todos los tableros.

Cuándo usarlo

Para trabajo que avanza por fases y se reparte a la vista: los encargos del taller, las tareas de la tienda.
limit en una columna para el trabajo a la vez que admite: pasarse avisa con texto («Por encima del límite»), no bloquea.
Board es controlado: recibe columns y avisa con onMove, con el tablero entero ya movido y el movimiento (key, target, position). BoardInner lleva el orden por dentro (parte de initial), para una demo o un panel; con onMove (opcional) avisa igual de cada movimiento, para guardarlo sin tener que llevar el estado.

Cuándo no

Para reordenar una sola lista: SortableList.
Para repartir elementos entre dos listas (permisos, categorías): TransferList.
Para el estado de un único proceso: Steps.

Teclado: la primera tarjeta de cada columna es una parada de Tab; desde ahí, las flechas arriba y abajo recorren las tarjetas de la columna, izquierda y derecha pasan a la de al lado (al mismo puesto o a la última), e Inicio y Fin van a la primera y a la última. Con una tarjeta enfocada, Control (o Cmd) y las flechas la mueven: izquierda y derecha la cambian de columna, arriba y abajo de puesto. El foco se va con la tarjeta. En el borde no se mueve ni se pierde el foco.

Accesibilidad: es una sección con nombre obligatorio (label) y cada columna se llama por su título y su cuenta («En curso, 2 tarjetas»). Después de cada movimiento se anuncia dónde ha caído («Pulir el collar Luna, a En revisión, puesto 2 de 2»): sin el puesto y el total, mover con el teclado es a ciegas. La línea de ayuda de arriba explica las teclas, y el agarre de puntos es un dibujo, no un botón.

Aspecto fino: variables CSS --amset-board-*: -card-padding, -column, -description, -detail, -gap, -name, -padding, -radius, -title. El tamaño mueve el ancho de la columna (12, 15 o 18 rem), el relleno de la tarjeta y los cuerpos de letra.

Cómo se ve

Arrastra las tarjetas o, con una enfocada, muévela con Control y las flechas.

Revisar el contrato

Llamar al proveedorAntes del viernes

Montar el escaparate

Sin tarjetas

<Board
  label="Tareas del sprint"
  columns={columnas}
  onMove={setColumnas}
/>

Props

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

Prop	Tipo	Para qué sirve
`columns`obligatoria	`readonly BoardColumn[]`	—
`label`obligatoria	`string`	De que es el tablero. Obligatoria: nombra la region entera.
`onMove`obligatoria	`(columns: readonly BoardColumn[], move: BoardMove) => void`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`empty`	`string`	—
`hint`	`string`	La linea de instrucciones. Cambiala si tu app usa otras teclas.
`size`	`"sm" \| "md" \| "lg"`	—

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-board-column`	`15rem`
`--amset-board-gap`	`var(--amset-space-3)`
`--amset-board-padding`	`var(--amset-space-3)`
`--amset-board-card-padding`	`var(--amset-space-2) var(--amset-space-3)`
`--amset-board-radius`	`var(--amset-radius)`
`--amset-board-title`	`var(--amset-text-sm)`
`--amset-board-name`	`var(--amset-text-base)`
`--amset-board-description`	`var(--amset-text-sm)`
`--amset-board-detail`	`var(--amset-text-xs)`

Cómo se cambia

.amset-board {
  --amset-board-column: ...;
  --amset-board-gap: ...;
}

En el banco de pruebas

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