Collapse
- Angular:
mds-collapse - CSS/HTML (mds-styles): Collapse (accordion como comportamento)
- Figma: ❌
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Collapse oculta ou revela conteúdos secundários em áreas expansíveis. Quando configurado como Accordion em uma lista aninhada, o componente permite a expansão de apenas uma seção por vez, recolhendo automaticamente as demais para manter o foco e a compacidade da interface.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Comportamento Exclusivo (Accordion): Utilize este modo quando o usuário deve processar informações de forma sequencial ou quando o espaço vertical é crítico.
- Foco na Tarefa: Ao expandir uma nova seção no modo Accordion, o sistema deve garantir que o conteúdo revelado esteja visível, ajustando a rolagem se necessário.
- Indicação de Estado: Use ícones claros (como
>ouv) em Caixa de Título para os cabeçalhos. - Vá Direto ao Ponto: O cabeçalho deve ser autossuficiente. Se o usuário precisar saber o que há dentro antes de abrir, use um resumo curto.
- Exemplo: Dados do Veículo (Placa ABC-1234) em vez de apenas “Dados do Veículo”.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto Logístico | Estilo Incorreto (Prolixo) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Rota de Entrega | Veja aqui todas as paradas da sua rota | Paradas da Rota |
| Dados da Carga | Informações extras sobre o peso e cubagem | Especificações Técnicas |
| Histórico | Clique para expandir o histórico de eventos | Histórico de Eventos |