LegendBar

Angular: mds-legend-bar
CSS/HTML (mds-styles): disponível
Figma: ❌
Tipo: Componente Angular

Definição Funcional

A LegendBar é uma barra de utilidade fixada no rodapé da interface que fornece o significado de ícones, cores e símbolos utilizados na tela atual. Ela oferece flexibilidade de visualização, podendo ser fixada para consulta constante ou minimizada para otimizar o espaço de trabalho.

Diretrizes de Comportamento

Estados de Visibilidade:
- Minimizada: Exibe apenas um gatilho (ícone de ajuda ou texto “Legenda”). Expande-se ao passar o mouse (hover) ou ao ser clicada.
- Fixada: Permanece aberta no rodapé, empurrando o conteúdo da página para cima (ou sobrepondo-se com transparência, conforme o layout).
Organização dos Itens: As legendas devem ser agrupadas por categoria. Cada item deve combinar o elemento visual (cor/ícone) seguido pelo seu significado.
Escrita (UX Writing): Use Caixa de Sentença para as descrições das legendas. Seja extremamente breve.
- Exemplo: ● Carga atrasada | ● Em trânsito
Posicionamento: Sempre na base inferior da tela (bottom), alinhada à direita ou centralizada, dependendo da densidade de informações do rodapé.

Visão ao vivo

Storybook mds-angular — components-legendbar ↗