Todos los componentes (244)

Panel de mando

Gestión · DashboardBuilder

Qué es y cuándo usarlo

Un panel de mando que cada persona ordena: piezas en una rejilla que se mueven, cambian de tamaño, se quitan y se añaden.

Cuándo usarlo

La página de inicio de una aplicación de gestión, con las cifras y gráficas que cada uno quiera ver.
widgets son las piezas, con su sitio en la rejilla (x, y, w, h en celdas); renderWidget pinta cada una con los datos de la aplicación.
kinds son las piezas que se pueden añadir, con su tamaño al ponerlas y sus mínimos y máximos.
Con «Editar el panel», cada pieza se mueve arrastrando su asa o con las flechas, cambia de tamaño desde la esquina o con Mayúsculas y las flechas, y se quita con Supr o su botón. Al mover una, las demás se apartan y todo sube para no dejar huecos.

Cuándo no

Una disposición fija diseñada una vez: Grid o Stack.
Guardar el orden, sus versiones y quién puede cambiarlo es cosa de la aplicación: este componente entrega las piezas por onChange; readOnly quita el modo de edición.

Teclado: en edición, el asa de cada pieza recibe el foco; las flechas la mueven y Mayúsculas con las flechas cambian su tamaño.

Accesibilidad: cada pieza es un artículo con nombre; el asa lleva la explicación de su teclado y cada movimiento anuncia dónde queda y cuánto mide.

Aspecto fino: en edición las piezas llevan borde discontinuo del acento y una esquina para cambiar el tamaño.

Cómo se ve

Flechas para mover, Mayúsculas y flechas para cambiar el tamaño, Supr para quitar.

Ventas de hoy

1.240 €

Pedidos pendientes

Stock bajo

3 productos

<DashboardBuilder
  label="Panel de la tienda"
  widgets={widgets}
  onChange={setWidgets}
  kinds={tipos}
  rowHeight={64}
  renderWidget={(widget) => <p>{cifras[widget.type]}</p>}
/>

Props

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

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que panel es («Resumen de ventas»). Obligatorio.
`onChange`obligatoria	`(widgets: readonly DashboardWidget[]) => void`	—
`renderWidget`obligatoria	`(widget: DashboardWidget) => ReactNode`	Lo que pinta cada pieza: la grafica, la cifra, la tabla. Se le pasa la pieza entera.
`widgets`obligatoria	`readonly DashboardWidget[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`columns`	`number`	Columnas de la rejilla. Por defecto, 12.
`editing`	`boolean`	Editando: las piezas se mueven y cambian de tamaño. Si se pasa, el modo lo lleva quien lo usa.
`kinds`	`readonly WidgetKind[]`	Las piezas que se pueden añadir. Sin esto, no se añade nada; solo se ordena lo que hay.
`onEditingChange`	`(editing: boolean) => void`	—
`readOnly`	`boolean`	Sin el boton de editar: un panel que solo se mira.
`rowHeight`	`number`	El alto de cada fila, en pixeles. Por defecto, 80.

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: