toggle

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.

Parâmetro

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.

<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.

<div data-toggle="grupoxxx" data-toggle-option="1" hidden>

Este parâmetro 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.

<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.

<button data-toggle="grupoxxx" data-toggle-val="1">Geral</button>

Descrição de funcionamento

O sistema aguarda por 2 tipos de eventos click em buttons e change em selects.
Para eventos em buttons ele automaticamente irá procurar elementos com o mesmo grupo e manter somente o "clicado" com a classe "active".
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:

<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

<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>