Todos los componentes (244)

Selección por arrastre

Elección · DragSelectArea

Qué es y cuándo usarlo

Una zona en la que se eligen varios elementos arrastrando un rectángulo con el ratón o el dedo, como en un explorador de ficheros.

Cuándo usarlo

Una rejilla de ficheros, fotos o tarjetas de la que se eligen muchos a la vez.
Cada elemento elegible lleva data-select-key con su clave; el resto del contenido no se elige. selected y onSelectionChange son la selección.
Mayúsculas o Control al empezar suman a lo que ya había; un clic en el fondo lo quita. Empezar encima de un elemento no arrastra, para no robarle el clic.
Con el teclado, Control+A elige todo y Escape lo quita (y cancela un arrastre a medias).

Cuándo no

Como única forma de elegir: arrastrar no lo puede hacer todo el mundo. Cada elemento tiene que poder elegirse también solo, con una casilla o un botón.
Listas con orden: SelectableList.

Teclado: Control+A y Escape dentro de la zona; cada elemento con su propio control.

Accesibilidad: la zona es un grupo con nombre y lleva una explicación de cómo se usa; lo que queda elegido se anuncia.

Aspecto fino: el rectángulo lleva el borde del acento y su fondo muy suave; mientras se arrastra no se selecciona texto.

Cómo se ve

Arrastra para elegir varios. Control+A los elige todos y Escape quita la selección.

Anillo

Pulsera

Collar

Pendientes

Broche

Reloj

Elegidos: Collar.

<DragSelectArea label="Productos de la colección" selected={elegidas} onSelectionChange={setElegidas}>
  <div data-select-key="anillo">Anillo</div>
  <div data-select-key="pulsera">Pulsera</div>
  <div data-select-key="collar">Collar</div>
</DragSelectArea>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	Lo que se puede elegir. Cada elemento lleva `data-select-key` con su clave; lo demas no se elige.
`label`obligatoria	`string`	Que se elige («Fotos del album»). Obligatorio.
`onSelectionChange`obligatoria	`(keys: readonly string[]) => void`	—
`selected`obligatoria	`readonly string[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	—

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:

Interactivo