Todos los componentes (204)

Lista ordenable

Gestión · SortableList · .amset-sortable

Qué es y cuándo usarlo

Una lista que se reordena arrastrando y con el teclado, que es la mitad que casi todo el mundo se deja. Es una rejilla (role="grid") y no una lista a secas porque cada fila necesita su propio foco para poder moverla sin ratón. El arrastre es el nativo del navegador.

Cuándo usarlo

Ordenar las líneas de una factura, las secciones de la portada de la tienda, las prioridades de una lista de tareas.
Es controlada: onSort llega con el orden entero (las claves), no con «de aquí a allí», y quien la usa guarda el orden.
SortableListInner lleva el orden por dentro (parte de initial), para cuando no hace falta guardarlo fuera en cada movimiento (un panel de ajustes que se envía al final).
Encima va una línea con las instrucciones; hint la cambia si la aplicación usa otras teclas.

Cuándo no

Una jerarquía (categorías dentro de categorías): Tree.
Elegir filas, no ordenarlas: SelectableList.

Teclado: la lista es una sola parada del Tab; las flechas arriba y abajo pasan de fila, e Inicio y Fin van a los extremos. Con el foco en una fila, Control (o Cmd) y las flechas arriba y abajo la suben o la bajan un puesto, y el foco se queda en ella. Cada movimiento se anuncia con el puesto en que cae («Envío asegurado, puesto 3 de 4»).

Accesibilidad: la lista se llama como label y cada fila se anuncia por la suya. Cada fila lleva draggable: que se puede coger lo dice el atributo, no solo el cursor. El asa de puntos y el icono son decorativos. Sin elementos, dice empty («No hay nada que ordenar») en vez de dejar un hueco.

Aspecto fino: variables CSS --amset-sortable-*: -detail, -font, -gap, -grip, -icon, -padding, -radius, -row-gap, -row-padding, -row-radius. El tamaño mueve el relleno de la fila, el hueco y el cuerpo de letra, y el lado del asa y del icono.

Cómo se ve

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

Nombre

EstadoPendiente, pagado, enviado

Total

<SortableList label="Orden de las columnas" items={items} onSort={setOrden} />

Props

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

Prop	Tipo	Para qué sirve
`items`obligatoria	`readonly SortableItem[]`	—
`label`obligatoria	`string`	Que se esta ordenando: "Líneas de la factura". Obligatorio.
`onSort`obligatoria	`(keys: readonly string[]) => void`	Llega con el orden nuevo entero, no con "de aquí a allí".
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`empty`	`ReactNode`	Texto cuando la lista está vacía.
`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-sortable-gap`	`var(--amset-space-1)`
`--amset-sortable-padding`	`var(--amset-space-1)`
`--amset-sortable-row-padding`	`var(--amset-space-2) var(--amset-space-3)`
`--amset-sortable-row-gap`	`var(--amset-space-3)`
`--amset-sortable-radius`	`var(--amset-radius)`
`--amset-sortable-row-radius`	`var(--amset-radius-sm)`
`--amset-sortable-font`	`var(--amset-text-base)`
`--amset-sortable-detail`	`var(--amset-text-sm)`
`--amset-sortable-grip`	`1rem`
`--amset-sortable-icon`	`1.125rem`

Cómo se cambia

.amset-sortable {
  --amset-sortable-gap: ...;
  --amset-sortable-padding: ...;
}

En el banco de pruebas

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