DynamicCard
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 DynamicCard é um contêiner modular projetado para exibir registros de forma estruturada. Ele mantém uma anatomia fixa que organiza a informação por prioridade, permitindo que os campos internos sejam personalizados sem quebrar a consistência visual da interface. )
Anatomia Padronizada (Hierarquia de Leitura)
Seção intitulada “Anatomia Padronizada (Hierarquia de Leitura)”A estrutura do card é dividida em blocos de importância decrescente:
- Tags de Apoio (Cabeçalho): Localizadas no topo, servem para categorização rápida (ex: Tipo de frete, Origem do cadastro). Use etiquetas curtas.
- Identificação Principal (Título): O dado mestre do card (ex: Código Identificador). Deve estar em Caixa de Título, negrito e maior destaque visual.
- Informações Primárias: Dados essenciais que nunca mudam de posição, garantindo a ancoragem visual (ex: Rota/Origem-Destino).
- Informações Secundárias de Apoio: Campos dinâmicos mapeados conforme a necessidade da etapa. Podem ser ocultados para reduzir a densidade visual.
- Mensagens de Alerta: Espaço reservado para notificações críticas de sistema que exigem atenção imediata.
- Totalizadores e Ações (Rodapé): Agrupa indicadores numéricos (anexos, mensagens), o usuário responsável e o menu de opções (Popover).
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-dynamic-card
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'd-flex flex-column no-padding--all gap--sm elevation--1' |
— |
template (obrigatório) |
CardTemplateModel |
— | Template das informações dinâmicas exibidas no card, com as chaves dos campos a serem exibidos baseado no mapeamento dos campos json { config: { showLabel: true, showIcon: true }, label: 'codigoIdentificador', header: ['origem.localidade', 'destino.localidade'], body: ['codigo', 'caracteristica.descricao', 'motorista.documento','veiculo.placa'], badges: ['tipoFrete', 'origemCarga'] } |
data (obrigatório) |
any |
— | — |
itemMap (obrigatório) |
CardTemplateMapeamentoModel |
— | — |
badges (obrigatório) |
CardTemplateBadgeModel[] |
— | — |
totals (obrigatório) |
CardTemplateTotalizadorModel |
— | — |
showFooter |
boolean |
true |
— |
hasNotification |
boolean |
false |
Adiciona alteração visual para identificar que possui notificação |
hasUpdate |
boolean |
false |
Adiciona alteração visual para identificar a carga teve atualização |
isSelectionMode |
boolean |
false |
Habilita o modo de seleção do card |
isSelected |
boolean |
false |
Card selecionado |
Outputs
Seção intitulada “Outputs”| Output | Payload | Descrição |
|---|---|---|
onToggleCard |
any |
— |
Conteúdo projetado com o atributo data-position:
data-position="badge"data-position="before-header"data-position="before-title"data-position="after-title"data-position="before-body"data-position="after-body"