SectionHeader
Tipo: Componente Angular
- DesignersFigma Design System 2.0
- Devs · HTML/CSSmds-stylesAinda não disponível
- Devs · Angularmds-angular Storybook com inputs e outputs
Definição Funcional
Seção intitulada “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
Seção intitulada “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
h1ouh2do componenteText). - 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.
- Atualizar dados: Botão de ícone (
- 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 resultadosouBuscar por código
- Certo:
- Botão de Filtro: Destaque de cor (como o amarelo da imagem) para aplicar ou abrir a gaveta de filtros ativos.
- 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.
Exemplos de Escrita
Seção intitulada “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 |
Para desenvolvedores
Seção intitulada “Para desenvolvedores”Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.
Angular (mds-angular)
Seção intitulada “Angular (mds-angular)”Seletor
Seção intitulada “Seletor”header[mdsSectionHeader], legend[mdsSectionHeader]
A section header é o cabeçalho utilizado para diferenciar sessões.
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
label |
string |
'' |
Titulo da section |
description |
string |
'' |
Descrição da section |
size |
MdsSizes |
'md' |
Tamanho |
type |
'icon' | 'avatar' |
'icon' |
Tipo de cabeçalho |
iconType |
'alias' | 'svg' |
'alias' |
Tipo do icone |
icon |
MdsIconAlias | undefined |
undefined |
Icone |
avatarAutoVariant |
boolean |
true |
Avatar auto variant |
avatarAutoVariantStyles |
MdsAvatarVariantsStyles[] |
['lighter'] |
Estilos de auto variant do avatar |
avatarVariant |
MdsAvatarVariants |
'default' |
Variante do avatar |
additionalClass |
string |
'' |
Classe adicional |
className |
string |
'' |
Classe CSS customizada adicionada ao host |
removePaddingBottom |
boolean |
false |
Remove espaçamento do header |
Conteúdo projetado com o atributo data-position:
data-position="label"data-position="description"