Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
O botão Switch permite a escolha de apenas uma entre duas opções (Ativado ou Desativado).
- Há duas opções de escolha que possam ser revertidas facilmente.
- Há necessidade de seleção rápida.
- Substituição de elemento padrão de checkbox acompanhado de um botão "Salvar".
- Acompanhado um modal de confirmação, por exemplo uma exclusão, ou de não ter possibilidade de reverter a ação.
Você pode definir que será escrito na label utilizando os atributos ls-switch-on quando estiver checado e ls-switch-off quando não estiver checado.
1
2
3
4
5
6
7
8
<div class="ls-box">
<h2 class="ls-title-5 ls-display-inline-block">Uso de envios excedentes</h2>
<div data-ls-module="switchButton" class="ls-switch-btn ls-float-right">
<input type="checkbox" id="teste">
<label class="ls-switch-label" for="teste" name="label-teste" ls-switch-off="Desativado" ls-switch-on="Ativado"><span></span></label>
</div>
</div>
Para desabilitar os eventos do swicth e atrelar sua utilização ao href de um hyperlink, basta seguir a utilização abaixo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- Desativado -->
<div class="ls-box">
<h2 class="ls-title-5 ls-display-inline-block">Uso de envios excedentes</h2>
<div data-ls-module="switchButton" class="ls-switch-btn ls-float-right">
<a href="#">
<input type="checkbox" id="test1">
<label class="ls-switch-label" for="test1" name="label-test1" ls-switch-off="Desativado" ls-switch-on="Ativado"><span></span></label>
</a>
</div>
</div>
<!-- Ativado -->
<div class="ls-box">
<h2 class="ls-title-5 ls-display-inline-block">Uso de envios excedentes</h2>
<div data-ls-module="switchButton" class="ls-switch-btn ls-float-right">
<a href="#">
<input type="checkbox" checked id="test2">
<label class="ls-switch-label" for="test2" name="label-test2" ls-switch-off="Desativado" ls-switch-on="Ativado"><span></span></label>
</a>
</div>
</div>
Você pode escutar eventos de ativado e desativado nos botões switch, veja a referência abaixo.
| Evento | Descrição |
|---|---|
| switchButton:activated | Quando um botão switch for ativado, o evento |
| switchButton:deactivated | Quando um botão switch for desativado, o evento |
Exemplo:
1
2
3
4
5
6
7
8
9
// Um botão switch específico
$('#id-do-botao-switch').on('switchButton:activated', function() {
// do something
})
// Todos os elementos botão switch
$('.ls-switch-btn').on('switchButton:deactivated', function() {
// do something
})