Toolbar
- Angular:
mds-toolbar - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O Toolbar é uma barra de ferramentas persistente que aparece para indicar que a interface entrou em um modo de operação específico (ex: edição, personalização ou seleção em massa). Ele agrupa instruções contextuais e botões de ação necessários para concluir ou cancelar o modo atual. )
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Posicionamento: Geralmente fixado no topo ou rodapé da tela para garantir visibilidade constante enquanto o modo estiver ativo.
- Título do Modo: Identifique claramente o que está sendo executado. Use Caixa de Título.
- Exemplo: Configuração das Etapas, Edição de Percurso.
- Instrução Contextual: Texto curto que orienta o usuário sobre como interagir com os elementos da tela naquele modo. Use Caixa de Sentença.
- Exemplo: Clique na etapa e arraste para ordenar.
- Ações de Conclusão: O botão principal deve ter um destaque semântico (geralmente verde para sucesso/conclusão). Use Caixa de Título.
- Exemplo: Concluir, Salvar Alterações.
- Saída e Cancelamento: Deve sempre oferecer um botão de fechar (X) ou “Cancelar” para retornar ao estado normal do sistema.
Exemplos de Escrita (Modos Operacionais)
Seção intitulada “Exemplos de Escrita (Modos Operacionais)”| Contexto | Título (O quê) | Instrução (Como) | Ação (Botão) |
|---|---|---|---|
| Personalização | Configuração do Fluxo | Arraste as colunas para definir a ordem. | Concluir |
| Seleção em Massa | Ações em Lote | Selecione os fretes que deseja faturar. | Processar (5) |
| Roteirização | Edição de Rota | Clique nos pontos do mapa para reordenar. | Salvar Rota |