Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
Como alterar classes de elementos
Basicamente essa funcionalidade faz um toggleClass em determinado elemento para que sua classe seja alternada.
| Classe / Atributo | Descrição |
|---|---|
| data-toggle-class | Atributo cujo valor é a classe que o script irá alternar |
| data-target | Elementos que terão a classe alternada definida no data-toggle-class |
Veja um exemplo abaixo:
1
<button class="ls-btn-dark" data-toggle-class="ls-btn-dark">Troca a adiciona/remove a classe <i>.ls-btn-dark</i> deste botão</button>
Neste exemplo, o atributo data-toggle-class contém o valor da classe que ele deve alternar.
1
2
3
4
<button class="ls-btn-primary" data-toggle-class="ls-background-info" data-target="#lsBox">Alterna a classe <strong>.ls-background-info</strong> do <strong>ls-box</strong></button>
<div id="lsBox" class="ls-box ls-background-info">
Uma mensagem bonita para caramba!
</div>
É possível modificar vários elementos ao mesmo tempo, referenciando no data-target a classe destes elementos, como abaixo:
1
2
3
<button class="ls-btn-primary" data-toggle-class="ls-background-warning" data-target=".exampleBox">Alterna as classes dos elementos abaixo</button>
<div class="exampleBox ls-box ls-background-warning">Uma mensagem bonita para caramba!</div>
<div class="exampleBox ls-box ls-background-warning">Uma mensagem bonita para caramba!</div>
Também é possível usar o comportamento em inputs do tipo radio e checkbox, sendo, quando marcados, inserem a classe, quando desmarcados removem a classe do elemento desejado. Exemplos:
Checkbox
Radiogroup