Logo

Dashboard

Pré-requisitos

  • Conhecer container, grid e card para estruturar conteúdo.
  • Ter componentes básicos como MetricCard ou TaskRow definidos.
  • Entender acionadores de drawer e modal para filtros e entrada de dados.

Passo a passo

  1. Defina o cabeçalho da tela com título e ações de atualização ou filtro.
  2. Estruture a área principal com container-wide e grid-3 para métricas críticas.
  3. Adicione seções auxiliares em grid-2 ou container-narrow para listas e tarefas.
  4. Crie overlays auxiliares (drawer para filtros, modal para criação rápida) e vincule-os ao FAB.

Estrutura completa do dashboard

Proto-Typed
Loading DSL editor...

Por quê: combina header, métricas, listas de apoio e overlays para um painel completo.

Depuração rápida

  • Métricas desalinhadas → verifique se todos os cards estão dentro do mesmo grid-*.
  • Filtros não fecham → confirme que o drawer usa @ghost[Cancelar](close) ou ação equivalente.
  • FAB não abre modal → valide o slug NewMetric em ambos os pontos.
  • Listas com ações inline → mova botões para row-end e mantenha list apenas com texto.
  • Cards muito largos → ajuste o container para container-wide ou reduza para grid-2.

Próximos passos