|
|
|
|
|
|
|
|
|
|
|
## Descrição.
|
|
|
|
|
|
|
|
> Informações relacionadas ao sistema de Toggle Elements da Ceicom, utilizado inicialmente para mostrar/esconder fields de um formulário com base em escolha de categoria/tipo.
|
|
|
|
|
|
|
|
> Hoje Conta com sistema de Tabs, mantendo funcionalidades comuns com o "mostrar/esconder fields".
|
|
|
|
|
|
|
|
## Requisitos.
|
|
|
|
> Sistema somente disponivel para funcionamento dentro das paginas de detalhamento de dados do CMS.
|
|
|
|
|
|
|
|
## Parametrôs
|
|
|
|
### **data-toggle**
|
|
|
|
Identificador do grupo que vai sofrer alteração de visibilidade.
|
|
|
|
Elementos com o mesmo **data-toggle** alternam visibilidade com base no valor recebido.
|
|
|
|
Atributo aplicado no **button/select** e no elemento que vai ter a visibilidade alterada.
|
|
|
|
```html
|
|
|
|
<button data-toggle="grupoxxx">Geral</button>
|
|
|
|
<select data-toggle="grupoxxx">...</select>
|
|
|
|
```
|
|
|
|
|
|
|
|
### **data-toggle-option**
|
|
|
|
Identificador do elemento que vai mudar, geralmente este valor será o **data-toggle-val** de um **button** ou o **val** de um **select**
|
|
|
|
Atributo aplicado no elemento que vai ter a visibilidade alterada.
|
|
|
|
```html
|
|
|
|
<div data-toggle="grupoxxx" data-toggle-option="1" hidden>
|
|
|
|
```
|
|
|
|
Este parametro pode receber mais de 1 valor se assim desejar, neste caso o elemento será mostrado quando qualquer um dos valores indicados estiver dentro do **val/data-toggle-val** recebido.
|
|
|
|
```html
|
|
|
|
<div data-toggle="grupoxxx" data-toggle-option="1,2" hidden>
|
|
|
|
```
|
|
|
|
|
|
|
|
### **data-toggle-val**
|
|
|
|
Diferente de um select, um **button** não tem val, neste caso inserimos o atributo **data-toggle-val** para que o sistema utiliza este valor ao clicar no **button** indicado.
|
|
|
|
```html
|
|
|
|
<button data-toggle="grupoxxx" data-toggle-val="1">Geral</button>
|
|
|
|
```
|
|
|
|
|
|
|
|
## Descrição de funcionamento
|
|
|
|
1. O sistema aguarda por 2 tipos de eventos ```click``` em **```buttons```** e ```change``` em **```selects```**.
|
|
|
|
2. Para eventos em ```buttons``` ele automaticamente irá procurar elementos com o mesmo grupo e manter somente o "clicado" com a classe **"active"**
|
|
|
|
3. Na sequência o sistema percorre todo o *DOM* a procura de elementos que contenham o mesmo **data-toggle** que o item do evento, escondendo todos que tenham valor diferente do **val/data-toggle-val** do item do evento.
|
|
|
|
|
|
|
|
#### Estrutura
|
|
|
|
Segue modelo completo de estrutura:
|
|
|
|
```html
|
|
|
|
<div class="col12">
|
|
|
|
<select data-toggle="grupo2">
|
|
|
|
<option value="1">1</option>
|
|
|
|
<option value="2">2</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="col12" data-toggle="grupo2" data-toggle-option="1" hidden>
|
|
|
|
<h3>Grupo 2 - valor 1</h3>
|
|
|
|
</div>
|
|
|
|
<div class="col12" data-toggle="grupo2" data-toggle-option="2" hidden>
|
|
|
|
<h3>Grupo 2 - valor 2</h3>
|
|
|
|
</div>
|
|
|
|
```
|
|
|
|
|
|
|
|
## Tabs
|
|
|
|
O sistema também conta com possibilidade de trabalhar com tabs, segue modelo de estrutura para tal:
|
|
|
|
#### Estrutura
|
|
|
|
```html
|
|
|
|
<div class="toggle-wrapper">
|
|
|
|
<div class="toggle-buttons">
|
|
|
|
<button type="button" class="btn is-light-gray" data-toggle="grupo1" data-toggle-val="1">Opção1</button>
|
|
|
|
<button type="button" class="btn is-light-gray" data-toggle="grupo1" data-toggle-val="2">Opção2</button>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div data-toggle="grupo1" data-toggle-option="1">
|
|
|
|
<!-- colums com fields -->
|
|
|
|
</div>
|
|
|
|
<div data-toggle="grupo1" data-toggle-option="2">
|
|
|
|
<!-- colums com fields -->
|
|
|
|
</div>
|
|
|
|
</div> |
|
|
|
\ No newline at end of file |
