Switches
Toggle switches brutalistas com track, thumb e transicao animada. Variantes de cor (preto, azul, magenta), 3 tamanhos e suporte a icones.
Switch Basico
Preview
HTML
<label class="canta-switch">
<input type="checkbox" class="canta-switch__input">
<span class="canta-switch__track">
<span class="canta-switch__thumb"></span>
</span>
<span class="canta-switch__label">Desligado</span>
</label>
<label class="canta-switch">
<input type="checkbox" class="canta-switch__input" checked>
<span class="canta-switch__track">
<span class="canta-switch__thumb"></span>
</span>
<span class="canta-switch__label">Ligado</span>
</label>Estados
On / Off / Disabled
HTML
<!-- Disabled -->
<label class="canta-switch">
<input type="checkbox" class="canta-switch__input" disabled>
<span class="canta-switch__track">
<span class="canta-switch__thumb"></span>
</span>
<span class="canta-switch__label">Disabled</span>
</label>Variantes de Cor
Default (preto) / Blue / Magenta
HTML
<label class="canta-switch">...</label>
<label class="canta-switch canta-switch--blue">...</label>
<label class="canta-switch canta-switch--magenta">...</label>Tamanhos
Small / Default / Large
HTML
<label class="canta-switch canta-switch--sm">...</label>
<label class="canta-switch">...</label>
<label class="canta-switch canta-switch--lg">...</label>Label a Esquerda
Label --left
HTML
<label class="canta-switch">
<input type="checkbox" class="canta-switch__input" checked>
<span class="canta-switch__track">
<span class="canta-switch__thumb"></span>
</span>
<span class="canta-switch__label canta-switch__label--left">Modo escuro</span>
</label>Com Icones
Icones no track
HTML
<label class="canta-switch canta-switch--with-icons">
<input type="checkbox" class="canta-switch__input">
<span class="canta-switch__track">
<span class="canta-switch__thumb"></span>
</span>
<span class="canta-switch__label">Com icones</span>
</label>API
| Classe | Descricao |
|---|---|
.canta-switch | Classe base do switch (label wrapper, obrigatoria) |
.canta-switch__input | Input hidden real (type="checkbox") |
.canta-switch__track | Trilha do switch (fundo) |
.canta-switch__thumb | Circulo movel (indicador) |
.canta-switch__label | Texto do label (a direita por padrao) |
.canta-switch__label--left | Posiciona o label a esquerda do track |
.canta-switch--blue | Variante azul CANTA quando ativo |
.canta-switch--magenta | Variante magenta CANTA quando ativo |
.canta-switch--sm | Tamanho pequeno (40x22px) |
.canta-switch--lg | Tamanho grande (64x34px) |
.canta-switch--with-icons | Exibe icones de check/cross no track |
checked | Atributo HTML nativo para estado ligado |
disabled | Atributo HTML nativo para desabilitar |