LegendItem
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
Seção intitulada “Definição Funcional”O LegendItem é o componente atômico projetado exclusivamente para compor a LegendBar. Ele atua como o par descritivo que traduz elementos visuais (cores, formas ou ícones) em significados textuais, sendo o bloco construtor de toda a barra de legendas do sistema.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- texto de Uso: O LegendItem não deve ser utilizado de forma isolada na interface; ele deve sempre estar contido dentro de uma LegendBar para garantir o alinhamento e o comportamento de exibição (fixo ou minimizado).
- Identidade Visual: O elemento gráfico do item (círculo, ícone ou tag) deve ser uma réplica exata do que o usuário vê nos cards, tabelas ou mapas para evitar confusão.
- Escrita (UX Writing):
- Use Caixa de Sentença.
- Mantenha o texto extremamente curto (preferencialmente até 3 palavras).
- Não utilize ponto final, facilitando a leitura em linha dentro da barra.
**Exemplos de Escrita **
Seção intitulada “**Exemplos de Escrita **”| Elemento Visual no Item | Texto do LegendItem | Significado para o Usuário |
|---|---|---|
● (Verde) |
No prazo | A operação está ocorrendo conforme o planejado. |
● (Laranja) |
Atraso leve | O veículo está até 30 min fora do cronograma. |
! (Ícone) |
Ocorrência aberta | Existe um problema pendente de resolução. |
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”mds-legend-item
Componente de item de legenda para utilizar no LegendBarComponent
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'' |
Classe CSS customizada adicionada ao host |
label (obrigatório) |
string |
— | Rótulo da legenda |
icon |
MdsIconAlias |
'etapa' |
Icone da legenda |
iconClass |
string |
'' |
Classe adicional para o icone |
color |
MdsColorBase |
'gray' |
Cor de referência do item |