Todos los componentes (204)

Transferencia

Elección · TransferList · .amset-transfer

Qué es y cuándo usarlo

Dos listas para repartir cosas: a la izquierda lo que hay, a la derecha lo elegido, y en medio los botones que mueven lo marcado o todo de una vez. Para los permisos de un usuario, las categorías de un producto o los miembros de un equipo.

Cuándo usarlo

Repartir un catálogo de hasta unas decenas de elementos, cuando conviene ver a la vez lo que entra y lo que se queda fuera.
search pone un campo encima de cada columna, que filtra solo la suya.
Un elemento con disabled en items ni se marca ni se mueve: para lo que viene impuesto de fuera. «Añadir todo» y «Quitar todo» lo respetan.
Lo añadido entra en el orden del catálogo, no en el orden en que se ha pulsado.
Es controlado: selected dice qué está a la derecha y onChange recibe las claves nuevas tras cada movimiento.

Cuándo no

Elegir varias sin necesidad de ver lo que queda fuera: MultiSelect, o SelectableList con selection="multiple".
Los filtros de un catálogo: FilterGroup.

Teclado: dentro de cada lista, las flechas se mueven y Espacio o Intro marcan y desmarcan. El Tab pasa de una lista a los botones de en medio y a la otra lista; un botón sin nada que mover está deshabilitado y se lo salta.

Accesibilidad: el conjunto es un grupo que se llama como la label, y cada lista se llama con su título y su cuenta («Disponibles: 7»). Los botones de flecha tienen nombre: «Añadir a elegidos», «Añadir todo a elegidos», «Quitar de elegidos» y «Quitar todo de elegidos». Cada movimiento se anuncia («2 añadidos. 3 de 8 elegidos.»): sin eso, pulsar una flecha no suena a nada.

Estados y movimiento: las filas traen los de SelectableList (hover, pulsada, marcada con el visto que se dibuja, foco por dentro, deshabilitada) y los botones, los de IconButton. Lo que llega a una columna entra con un fundido corto y la cuenta del título da un salto al cambiar. En estrecho las columnas se apilan y las flechas giran de lado. disabled (data-disabled en la raíz) enseña el reparto sin dejar marcar, buscar ni mover.

Tamaños: sm, md (por defecto) y lg van a las filas (30, 36 o 44 px), a los botones, a los buscadores y a los títulos, y cambian el alto mínimo y máximo de cada lista.

Aspecto fino: variables CSS en .amset-transfer: --amset-transfer-slot (entre columnas), --amset-transfer-title y --amset-transfer-count (sus letras), --amset-transfer-count-background y --amset-transfer-count-ink, --amset-transfer-height-min (las dos listas miden al menos esto, para que el bloque no baile) y --amset-transfer-height-max (el scroll empieza aquí; maxHeight lo cambia para las dos). Las filas se ajustan con --amset-list-sel-*.

Cómo se ve

Disponibles 2

Elegidos 1

<TransferList label="Permisos" items={items} selected={elegidos} onChange={setElegidos} />

Props

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

Prop	Tipo	Para qué sirve
`items`obligatoria	`readonly TransferItem[]`	—
`label`obligatoria	`string`	Obligatoria: nombra el grupo entero («Permisos del usuario»).
`onChange`obligatoria	`(keys: readonly string[]) => void`	—
`selected`obligatoria	`readonly string[]`	Controlado: las claves que estan en la columna de la derecha.
`availableLabel`	`string`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	Nada se marca ni se mueve: para ver un reparto que no se puede cambiar.
`maxHeight`	`string`	Alto maximo de cada lista antes de hacer scroll. Sin el, el de `--amset-transfer-height-max`.
`renderItem`	`OptionRender<TransferItem>`	Pinta cada elemento de las dos columnas: un avatar con el nombre, un permiso con su descripcion en otro tono. Lo que lee el lector de pantalla sigue siendo `label`.
`search`	`boolean`	Un campo de busqueda encima de cada columna.
`selectedLabel`	`string`	—
`size`	`"sm" \| "md" \| "lg"`	Filas, botones, buscadores y titulos a la vez: `sm`, `md` (por defecto) o `lg`. Las filas miden 30, 36 o 44 px, como el resto de controles.

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-transfer-slot`	`var(--amset-space-3)`
`--amset-transfer-title`	`var(--amset-text-sm)`
`--amset-transfer-count`	`var(--amset-text-xs)`
`--amset-transfer-count-background`	`var(--amset-divider)`
`--amset-transfer-count-ink`	`var(--amset-ink-2)`
`--amset-transfer-height-min`	`11rem`
`--amset-transfer-height-max`	`14rem`

Cómo se cambia

.amset-transfer {
  --amset-transfer-slot: ...;
  --amset-transfer-title: ...;
}

En el banco de pruebas

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