DyonaToolbar

DyonaToolbar é um layout flex visual para comandos recebidos por children. Não conhece Data Sources, regras de negócio nem 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="Novo">
    <IconButton><AddIcon /></IconButton>
  </Tooltip>

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

Title e menu

title é uma etiqueta opcional e discreta na linha principal. menu é um slot visual opcional na extremidade direita: pode receber IconButton, Menu, Popover ou outro elemento do consumidor. Toolbar não implementa dropdowns: anchorEl, open e onClose pertencem ao consumidor.

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

Layout

dense reduz padding e espaçamento. wrap é true por padrão; use false para uma linha. justify aceita start, center, end ou space-between; align aceita start, center ou end.

divider adiciona um separador inferior com o theme. sticky mantém a Toolbar no topo do contêiner com scroll.

Slot navigation

navigation renderiza uma linha visual fornecida pelo consumidor abaixo dos comandos. Com divider, a separação fica entre as duas linhas. Não administra rotas, tabs, breadcrumbs, anterior/próximo nem estado de navegação.

<DyonaToolbar divider navigation={<Breadcrumbs><Link>Clientes</Link><Typography>Cliente atual</Typography></Breadcrumbs>}>
  <Button>Atualizar</Button>
</DyonaToolbar>

Também pode receber tabs controlados pelo consumidor:

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

Dentro de Screen

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

Customer Management é a primeira integração live: Novo cliente é um comando de Screen na Toolbar e Editar cliente permanece na Grid.

Dentro de Card

<DyonaCard title="Faturas recentes">
  <DyonaToolbar dense divider>
    <Button>Atualizar</Button>
    <Button>Exportar</Button>
  </DyonaToolbar>
  <DyonaGrid {...gridProps} />
</DyonaCard>

Responsabilidades e contrato V1

DyonaToolbar apresenta comandos. DyonaScreen coordena a lógica.

Os botões e handlers pertencem ao consumidor. Toolbar não administra Data Sources, ações de negócio, permissões, loading nem coordenação da aplicação. Recomendam-se ícones com tooltip para ações frequentes, botões com texto quando trazem ênfase ou explicação e menu para comandos secundários.

Prop	Default	Descrição
children	obrigatória	Comandos a organizar.
title	—	Etiqueta opcional e discreta.
menu	—	Slot visual do consumidor na extremidade direita.
navigation	—	Linha visual do consumidor abaixo dos comandos.
dense	false	Padding e gap compactos.
sticky	false	Fixa no topo do contêiner com scroll.
divider	false	Separador inferior do theme.
wrap	true	Permite várias linhas.
justify	start	Alinhamento do eixo principal.
align	center	Alinhamento do eixo transversal.