ConfigToggle
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 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 |
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”[mdsConfigToggle]
O ConfigToggle permite halilitar um bloco de configurações, exibindo os campos relacionados somente se a configuração estiver habilitada
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'' |
Classe CSS customizada adicionada ao host |
label (obrigatório) |
string |
— | Titulo da configuração |
description (obrigatório) |
string |
— | Descrição da configuração |
icon (obrigatório) |
MdsIconAlias |
— | Icone da configuração |
name (obrigatório) |
string |
— | name do switch |
size |
MdsSizes |
'md' |
Tamanho geral do componente |
mode |
MdsConfigToggleModes |
'box' |
Modo de exibição do bloco |
boxSize |
MdsSizesSmall | 'no-spacing' |
'md' |
Modo box: tamanho do espaçmento do bloco |
boxVariant |
MdsBoxVariants |
'gray-lighter' |
Modo box: tamanho do espaçmento do bloco |
disabledHelp |
string |
null |
Mensagem de ajuda quando desativado |
toggleSize |
MdsSizesSmall |
'md' |
tamanho do switch |
formControl |
UntypedFormControl |
new UntypedFormControl() |
formControl do checkbox |
Outputs
Seção intitulada “Outputs”| Output | Payload | Descrição |
|---|---|---|
onToggle |
boolean |
Evento emitido no toggle |