Ir al contenido
sebs7n-ui2.10.0
Contenido y datos

BulkActionsBar

La barra de una selección múltiple: «3 seleccionados», las acciones para todos y «Limpiar selección».

Ver como .mdVer el código
import { BulkActionsBar } from "sebs7n-ui/bulk-actions-bar"

Ejemplos

Con selección

Se dibuja con al menos uno elegido y «Limpiar selección» lo apaga. El contador se anuncia al cambiar.

import { BulkActionsBar } from "sebs7n-ui/bulk-actions-bar"
import { Button } from "sebs7n-ui/button"
import { useState } from "react"

function Basic() {
  const [count, setCount] = useState(0)
  return (
    <div className="flex w-full flex-col items-start gap-3">
      <div className="flex gap-2">
        <Button onClick={() => setCount((value) => value + 1)} size="sm" variant="secondary">
          Elegir una factura
        </Button>
      </div>
      <BulkActionsBar count={count} labels={{ selectedOne: "{count} seleccionada", selectedOther: "{count} seleccionadas" }} onClear={() => setCount(0)}>
        <Button size="sm" variant="secondary">
          Marcar cobradas
        </Button>
        <Button size="sm" variant="secondary">
          Enviar recordatorio
        </Button>
      </BulkActionsBar>
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

BulkActionsBar

Hereda las props de <div>.

PropTipoPor defectoDescripción
count*number—Cuántos hay seleccionados. Con 0 la barra no se dibuja.
onClear*() => void—Vacía la selección: lo llama «Limpiar selección».
labelsPartial<BulkActionsLabels>—Textos: label, clear, selectedOne y selectedOther (con {count}). Por defecto, bulkActionsLabels.
classNamestring—Se fusiona con las clases del componente vía cn() (tailwind-merge): lo que pongas gana.

Teclado

Tab
Recorre las acciones y «Limpiar selección».
Enter · Espacio
Activan el botón enfocado.

Accesibilidad

  • Es un group con nombre («Acciones sobre la selección»). El contador es una región status: el lector anuncia el número nuevo cuando cambia la selección.

Reglas de uso

  • Se dibuja con count mayor que 0 y se va al limpiar. Va en el lugar de los filtros mientras hay selección (filters de DataTable, actions de FilterBar).
  • Las acciones son Button size="sm" variant="secondary"; destructive solo si borra, siempre detrás de un AlertDialog.
  • El género del contador («seleccionadas» para facturas) se cambia con labels (selectedOne y selectedOther, con {count}).
  • No lleva la selección: la tiene la tabla o la grilla, y la app le pasa count y onClear.

Relacionados

DataTableFilterBarAlertDialog