DyonaToolbar

DyonaToolbar es un layout flex visual para comandos recibidos mediante children. No conoce Data Sources, reglas de negocio ni actions[].

Importar

import AddIcon from '@mui/icons-material/Add';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import RefreshIcon from '@mui/icons-material/Refresh';
import {Breadcrumbs, Button, IconButton, Link, Tabs, Tooltip, Typography} from '@mui/material';
import {DyonaToolbar} from '@typhonsoftware/dyona-form';

Uso básico

<DyonaToolbar divider title="Clientes">
  <Tooltip title="Nuevo">
    <IconButton><AddIcon /></IconButton>
  </Tooltip>

  <Tooltip title="Actualizar">
    <IconButton><RefreshIcon /></IconButton>
  </Tooltip>
</DyonaToolbar>

Title y menu

title es una etiqueta opcional y sutil en la línea principal. menu es un slot visual opcional al extremo derecho: puede recibir un IconButton, Menu, Popover u otro elemento del consumidor. Toolbar no implementa dropdowns: anchorEl, open y onClose pertenecen al consumidor.

<DyonaToolbar title="Clientes" menu={<IconButton><MoreVertIcon /></IconButton>}>
  <Button>Guardar</Button>
</DyonaToolbar>

Layout

dense compacta padding y espaciado. wrap es true por defecto; usar false mantiene una línea. justify acepta start, center, end o space-between; align acepta start, center o end.

divider agrega un separador inferior con el theme. sticky mantiene la Toolbar en la parte superior de su contenedor scrolleable.

Slot navigation

navigation renderiza una fila visual entregada por el consumidor debajo de los comandos. Con divider, la separación queda entre ambas filas. No administra rutas, tabs, breadcrumbs, anterior/siguiente ni estado de navegación.

<DyonaToolbar divider navigation={<Breadcrumbs><Link>Clientes</Link><Typography>Cliente actual</Typography></Breadcrumbs>}>
  <Button>Actualizar</Button>
</DyonaToolbar>

También puede recibir tabs controlados por el consumidor:

<DyonaToolbar navigation={<Tabs value={tab} onChange={handleTabChange}>...</Tabs>}>
  <Button>Actualizar</Button>
</DyonaToolbar>

Dentro de Screen

<DyonaScreen title="Clientes">
  <DyonaToolbar divider>
    <Button onClick={handleNewCustomer} variant="contained">Nuevo</Button>
  </DyonaToolbar>
  <DyonaGrid {...gridProps} />
</DyonaScreen>

Customer Management es la primera integración live: Nuevo cliente es un comando de Screen en Toolbar y Editar cliente continúa en la Grid.

Dentro de Card

<DyonaCard title="Facturas recientes">
  <DyonaToolbar dense divider>
    <Button>Actualizar</Button>
    <Button>Exportar</Button>
  </DyonaToolbar>
  <DyonaGrid {...gridProps} />
</DyonaCard>

Responsabilidades y contrato V1

DyonaToolbar presenta comandos. DyonaScreen coordina la lógica.

Los botones y handlers pertenecen al consumidor. Toolbar no administra Data Sources, acciones de negocio, permisos, loading ni coordinación de la aplicación. Se recomiendan iconos con tooltip para acciones habituales, botones con texto cuando aportan énfasis o explicación y menu para comandos secundarios.

Prop	Default	Descripción
children	requerida	Comandos a organizar.
title	—	Etiqueta opcional y sutil.
menu	—	Slot visual del consumidor al extremo derecho.
navigation	—	Fila visual del consumidor debajo de los comandos.
dense	false	Padding y gap compactos.
sticky	false	Se fija arriba del contenedor scrolleable.
divider	false	Separador inferior del theme.
wrap	true	Permite varias líneas.
justify	start	Alineación del eje principal.
align	center	Alineación del eje transversal.