DateNavigator
- Angular:
mds-date-navigator - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O DateNavigator é um seletor de datas horizontal que permite a navegação e visualização de disponibilidade por períodos (semanal ou mensal). Ele funciona como um filtro de contexto que, ao ser acionado, atualiza os dados da página para exibir recursos disponíveis, como horários e docas. )
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Alternância de Visão: O componente deve permitir a expansão (através da seta inferior) para alternar entre a visão de Semana (foco em agendamento imediato) e Mês (planejamento a longo prazo).
- Indicação de Disponibilidade: Utilize estilos visuais distintos (como azul para dias com vagas e cinza para dias sem vagas/indisponíveis).
- Navegação Temporal: As setas laterais devem permitir o avanço ou retrocesso dos períodos (semana a semana ou mês a mês).
- Formatação de Datas: No cabeçalho, utilize o intervalo de datas de forma concisa.
- Exemplo: 08/AGO - 14/AGO.
- Vá Direto ao Ponto: Os rótulos dos dias da semana devem ser abreviados com três letras em Caixa Alta (DOM, SEG, TER) para otimizar o espaço e garantir o alinhamento.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto Logístico | Estilo Incorreto (Prolixo) | Estilo UX (Direto) |
|---|---|---|
| Cabeçalho | Semana de 08 até 14 de agosto | 08/AGO - 14/AGO |
| Tooltip (se houver) | Não existem docas livres neste dia | Sem disponibilidade |
| Tooltip (se houver) | Clique aqui para ver os horários | Ver horários |