ConfigToggle
- Angular:
[mdsConfigToggle] - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O ConfigToggle é um componente de controle utilizado para habilitar ou desabilitar funcionalidades ou blocos de configuração. Ele gerencia a visibilidade de campos dependentes, exibindo-os apenas quando a opção principal está ativa, otimizando o espaço em tela e o foco do usuário. ) )
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Estado Binário: Utilize um
Switch(alternador) posicionado à direita para indicar o estado Ativado/Desativado. - Título de Controle: Deve descrever claramente a ação ou recurso. Use Caixa de Título.
- Exemplo: Exibir Alerta na Carga, Habilitar Notificações.
- Descrição de Apoio: Explique o que acontece ao ativar a opção. Use Caixa de Sentença.
- Exemplo: Exibir alerta visual na carga ao utilizar essa ocorrência.
- Expansão Condicional: Ao ativar o toggle, os campos relacionados (Selects, ColorPickers, etc.) devem aparecer imediatamente abaixo, preferencialmente com uma animação suave de transição.
- Pré-visualização (Preview): Sempre que a configuração resultar em uma mudança visual (como um ícone colorido), ofereça um elemento de “Pré-visualização” para feedback imediato.
3. Exemplos de Escrita (Contexto de Configuração)
Seção intitulada “3. Exemplos de Escrita (Contexto de Configuração)”| Recurso (Label) | Descrição (Apoio) | Campos Dependentes |
|---|---|---|
| Cálculo de Pedágio | Calcular automaticamente o valor do pedágio na rota. | Select (Rota), Input (Valor) |
| Notificar Motorista | Enviar SMS automático ao motorista após o checkout. | Input (Template de Texto) |
| Alerta de Atraso | Destacar cargas com mais de 2 horas de atraso. | ColorPicker, Ícone |