Il Componente Modal è costituito, essenzialmente, da due diversi elementi, nello specifico:

• Un interruttore mediante il quale poter attivare o disattivare la visualizzazione di un determinato elemento, presente all’interno della stessa pagina web
• L’elemento da visualizzare / nascondere

Per quel che riguarda l’interruttore è possibile utilizzare indifferentemente un semplice link (tag a) oppure un apposito pulsante (tag button), la cosa importante è quella di associare a questo elemento l’ attributo aggiuntivo data-uk-toggle="{target: #ID}" dove, ovviamente, al posto di #id, andrà inserito l’identificativo del componente da visualizzare / nascondere.

Per quel che riguarda invece l’elemento da visualizzare / nascondere questo può essere un qualsiasi elemento presente nella stessa pagina dell’interruttore, la cosa importante è che possa essere individuato mediante uno specifico id o, al limite, mediante una specifica classe.

ATTENZIONE! Per individuare l’identificativo dell’elemento da visualizzare / nascondere è possibile utilizzare gli strumenti per sviluppatore del browser

Il markup completo al quale fare riferimento per poter implementare il componente Toggle potrebbe quindi essere il seguente

<!-- Pulsante per attivare visualizzare/nascondere l’elemento con id=my-id -->

<a data-uk-toggle="{target:'#my-id'}"> Clicca qui</a>

<!-- Elemento da visualizzare/nascondere -->

<div id="my-id">

Contenuti da visualizzare/nascondere

</div>

Nel caso in cui l’esigenza dovesse essere quella di visualizzare/nascondere più elementi contemporaneamente, sarà sufficiente assegnare a tutti questi elementi la stessa classe, che dovrà poi essere utilizzata anche come target dell’attributo data-uk-toggle.

In queste circostanze dunque il markup cui fare riferimento dovrà essere il seguente

<!-- Pulsante per attivare visualizzare/nascondere gli elemento con classe uguale a .my-class -->

<a data-uk-toggle="{target:'.my-class'}"> Clicca qui</a>

<!-- Elementi da visualizzare/nascondere -->

<div class="my-class">

Contenuti da visualizzare/nascondere

</div>

<div class="my-class">

Contenuti da visualizzare/nascondere

</div>

Dal punto di vista tecnico la visualizzazione / scomparsa dell’elemento o degli elementi interessati viene gestita da uikit aggiungendo o togliendo, a seconda dei casi, la classe .uk-hidden.

Più esattamente, ad ogni click sull’interruttore verrà aggiunta la classe .uk-hidden agli elementi target privi di tale classe (tali elementi verranno quindi nascosti) e verrà invece eliminata da quegli elementi ai quali era già stata assegnata (tali elementi torneranno quindi visibili)

Sfruttando lo stesso meccanismo è anche possibile assegnare o rimuovere dagli elementi target, al click sull’interruttore, una classe personalizzata.

Per far questo è necessario assegnare all’elemento utilizzato come interruttore il seguente attributo:

data-uk-toggle="{target:'#my-id', cls:'my-class'}"

dove inserire al posto di #id l’identificativo dell’elemento target e al posto di my-class la classe da assegnare / rimuovere al click sull’interruttore.

Questo potrebbe essere utile non tanto per visualizzare / nascondere determinati elementi quanto più esattamente per modificare la loro formattazione assegnandogli quindi stili diversi (es. un diverso colore di sfondo).