Todos los componentes (204)

Barra de herramientas

Acciones · Toolbar

Qué es y cuándo usarlo

Los controles de una tabla, de un editor o de una galería, juntos en una barra con nombre. Toda la barra es una sola parada del Tab y las flechas se mueven dentro: doce botones no se comen doce tabulaciones. BarGroup junta controles con un nombre («Vista», «Datos») y BarSeparator pone una raya entre grupos.

Cuándo usarlo

Encima de una tabla o una lista: filtrar, columnas, ordenar, exportar.
variant outline o raised para meterla en una caja; flat (por defecto) deja los controles sueltos.
orientation="vertical" para una barra en columna.
overflow="scroll" en sitios estrechos donde la barra tiene que quedarse en una línea.

Cuándo no

Dos o tres botones sin relación entre ellos: sueltos, sin barra.
Elegir una opción entre varias (vista de lista o de rejilla): SegmentedGroup.
Las acciones sobre las filas marcadas: SelectionBar.

Teclado: Tab entra en la barra por el primer control (o por el último que tuvo el foco) y el siguiente Tab sale de ella. Dentro, flecha derecha y flecha izquierda van de un control a otro, saltándose los deshabilitados y sin dar la vuelta en los extremos; en vertical, flecha abajo y flecha arriba.

Accesibilidad: label es obligatoria: en una pantalla puede haber varias barras y es lo que el lector anuncia al entrar. Cada BarGroup con label es un grupo con nombre. BarSeparator va de través y así se anuncia: vertical en una barra en fila y horizontal en una en columna. Los botones de solo icono llevan su aria-label.

Aspecto fino: sin variables propias: se ajusta con las clases amset-bar, amset-bar__group y amset-bar__separator. Nunca se sale de su caja: split (por defecto) baja lo que no cabe a otra línea y scroll deja una sola línea que se recorre de lado.

Cómo se ve

Entra con Tab y muévete con las flechas.

<Toolbar label="Herramientas de la lista de pedidos">
  <BarGroup label="Vista">
    <IconButton size="sm" aria-label="Filtrar los pedidos"><FilterIcon /></IconButton>
    <IconButton size="sm" aria-label="Ordenar"><SortIcon /></IconButton>
  </BarGroup>
  <BarSeparator />
  <BarGroup label="Datos">
    <Button size="sm" startIcon={<UpIcon />}>Exportar</Button>
  </BarGroup>
</Toolbar>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`label`obligatoria	`string`	De que son estas herramientas. Obligatorio: puede haber varias barras.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`orientation`	`BarOrientation`	En fila (por defecto) o en columna. Los `BarSeparator` van de traves.
`overflow`	`"split" \| "scroll"`	Que pasa cuando no cabe: `split` (por defecto) baja lo que sobra a otra linea; `scroll` deja una sola linea que se recorre de lado. Nunca se sale de su caja.
`variant`	`"outline" \| "raised" \| "flat"`	`flat` (por defecto) deja los controles sueltos; `outline` los junta en una caja con borde; `raised`, ademas, con sombra.

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: