SectionHeader

• Angular: header[mdsSectionHeader]
• CSS/HTML (mds-styles): disponível
• Figma: ✅ — abrir Design System 2.0 ↗
• Tipo: Componente Angular

Definição Funcional

O PageHeader é o cabeçalho padronizado que se posiciona no topo das páginas de módulos e seções. Ele define a identidade da página atual, destaca a ação principal de criação/cadastro e centraliza os controles globais de filtragem, atualização e configuração da tela. )

---

Diretrizes de Comportamento

• Título da Página (Identificação):
  • Deve indicar de forma clara o nome da tela ou do módulo.
  • Use Caixa de Título com fonte de maior destaque visual (ex: classe h1 ou h2 do componente Text).
  • Exemplo: Gestão de Fretes, Monitoramento de Pátio.
• Ação Principal (CTA Primário):
  • Posicionada logo ao lado do título (à esquerda) para ser encontrada rapidamente.
  • Deve ser um botão de alto destaque (cor primária) acompanhado de ícone intuitivo (ex: + para criação).
  • Use Caixa de Título e verbos de ação diretos no infinitivo.
  • Exemplo: Cadastrar, Novo Agendamento.
• Ações Secundárias e Utilitários (Direita):
  • Atualizar dados: Botão de ícone (refresh) para recarregar a visualização sem recarregar a página.
  • Configurações/Filtros Avançados: Botão de ícone (tune / sliders) para abrir opções de personalização da tela ou da tabela.
  • Mais Opções (Overflow): Menu de três pontos (more_vert) para ações secundárias menos frequentes.
• Busca e Filtro Rápidos:
  • Campo de Busca (Input): Utilizado para busca rápida por texto. O texto de placeholder deve ser em Caixa de Sentença e instruir o parâmetro de busca sem reticências desnecessárias.
    • Certo: Filtrar resultados ou Buscar por código
  • Botão de Filtro: Destaque de cor (como o amarelo da imagem) para aplicar ou abrir a gaveta de filtros ativos.

---

Exemplos de Escrita

Título da Página	Ação Principal (CTA)
Viagens em Aberto	Nova Viagem
Cadastros de Veículos	Cadastrar
Ocorrências de Pátio	Registrar Ocorrência

Visão ao vivo

Storybook mds-angular — components-sectionheader ↗

Componentes relacionados

• PageHeader
• Input