LegendBar

Tipo: Componente Angular

• DesignersFigmaAinda não disponível
• Devs · HTML/CSSmds-stylesAinda não disponível
• Devs · Angularmds-angular ↗Storybook com inputs e outputs

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é.

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)

Seletor

mds-legend-bar

Barra de rodapé para disponibilizar legendas na tela

Inputs

Input	Tipo	Padrão	Descrição
className	string	''	Classe CSS customizada adicionada ao host
label	string	'Legenda:'	Título da barra
isFixed	boolean	true	Define se a barra será fixada no rodapé
id	string	''	Identificador para gravar o estado da barra no localStorage
size	'sm' | 'xs'	'sm'	Tamanho da barra

Visão ao vivo

Storybook mds-angular — components-legendbar ↗