Todos los componentes (204)

Barra de selección

Acciones · SelectionBar

Qué es y cuándo usarlo

La barra que sale al marcar filas de una tabla o de una lista: cuántas van («3 pedidos de 6 seleccionados») y qué se puede hacer con ellas. Con nada marcado no se pinta.

Cuándo usarlo

Acciones en masa sobre lo marcado: exportar, anular, etiquetar, mover.
Flotando abajo y centrada (por defecto), sobre la lista, o en su sitio con floating={false}. count es cuántas van y actions, los botones.
Con onSelectAll y total para ofrecer «Seleccionar los 120», no solo lo que se ve.
name lleva singular, plural y género ({ singular: 'photo', plural: 'fotos', gender: 'female' }) para que el texto concuerde: «1 foto seleccionada», «Seleccionar las 12.000». Las cifras van con el idioma.

Cuándo no

Herramientas que no dependen de lo marcado: Toolbar.
Una acción sobre una sola fila: el ActionMenu de esa fila.

Teclado: Escape quita la selección (llama a onDeselect) con el foco en la barra o en la zone donde se marca (la tabla, la lista); en otra parte de la página no, ni cuando ese Escape ya lo ha atendido una capa abierta (el menú o el diálogo que cierra). La barra no atrapa el foco: se llega a ella tabulando desde la lista, y dentro son botones normales.

Accesibilidad: es una región cuyo nombre es el propio recuento, y el recuento se anuncia cada vez que cambia: marcar una casilla no dice nada por sí mismo. «Quitar selección» está siempre, para quien no usa Escape. El foco no se pierde cuando algo se va: al quitar la selección desde la barra pasa a la zone, y al pulsar «Seleccionar los 120» (que desaparece) pasa a la barra, que ya se llama como el recuento nuevo.

Aspecto fino: sin variables propias: se ajusta con las clases amset-selection, amset-selection--floating, amset-selection__count y amset-selection__actions. La flotante no sale al imprimir.

Cómo se ve

3 pedidos de 5 seleccionados

<SelectionBar
  count={marcados.length}
  total={5}
  name={{ singular: 'pedido', plural: 'pedidos', gender: 'male' }}
  floating={false}
  onDeselect={() => setMarcados([])}
  onSelectAll={marcarTodos}
  actions={<Button size="sm">Exportar</Button>}
/>

Props

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

Prop	Tipo	Para qué sirve
`actions`obligatoria	`ReactNode`	Los botones de accion en masa: borrar, exportar, etiquetar.
`count`obligatoria	`number`	Cuantos hay marcados. Con cero, la barra no se pinta.
`onDeselect`obligatoria	`() => void`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`floating`	`boolean`	Pegada abajo y flotando sobre el contenido. Por defecto si.
`name`	`Noun`	Como se llaman las cosas, con singular, plural y genero: `{ singular: 'photo', plural: 'fotos', genero: 'femenino' }`. Por defecto, «elementos».
`onSelectAll`	`() => void`	Boton de marcar todo lo que hay, no solo lo que se ve.
`total`	`number`	Cuantos hay en total, para decir «3 de 120».
`zone`	`RefObject<HTMLElement \| null>`	Donde se marca: la tabla, la lista, la rejilla. Escape quita la seleccion con el foco dentro de esto o de la barra, y en ninguna otra parte. Y es a donde va el foco cuando la barra se va con el dentro («Quitar selección», Escape). Sin esto, Escape solo actua desde la barra y el foco no tiene a donde ir.

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: