bulma-panel.js

(Aggiornato: 15 Apr 2021 • Lettura: < 2")

Bulma è un ottimo framework CSS, ma a volte manca giusto un po’ di codice javascript per farlo funzionare. Qui di seguito, qualche piccola riga di codice per non reinventare la ruota ogni volta.

bulma-panel.js

Questo contiene una semplice soluzione per il componente Panel di Bulma, basata su un semplice codice JS e classi CSS (quindi di semplicissima manutenzione).

Albero delle classi CSS di un semplice Panel

                panel
                ├── panel-tabs
                │   ├── panel-tab
                │   ├── panel-tab
                │   ┊
                │   └── panel-tab
                ├── panel-block
                ├── panel-block
                ┊
                └── panel-block

1. Aggiungi onclick="panelDigger([label])" agli elementi con classe panel-tab, scegliendo un nome univoco per [label]; es.: <a class="panel-tab">e-books</a> diventerà <a class="panel-tab" onclick="panelDigger(ebook);">e-books</a>.
2. Aggiungi sia agli elementi con classe panel-tab che a quelli con panel-block una nuova classe panel-[label] scegliendo la [label] in accordo con il panel-tab da cui dipende; es.:

   <p class="panel-tabs">
     <a class="panel-tab panel-ebook" onclick="panelDigger('ebook')">e-books</a>
   </p>
   <a class="panel-block panel-ebook">Kobo</a>

3. Aggiungi bulma-panel.js alla tua pagina nel tag HEAD, i.e.: <script src="path/to/myScript.js"></script>
4. Bonus-track 1: se vuoi che un panel-block sia mostrato in più categorie, basta aggiungere un’altra classe panel-[label] all’elemento panel-block. Es.: <a class="panel-block panel-ebook panel-hardware panel-linux panel-eink">Kobo</a>
5. Bonus-track 2: se vuoi tornare a una situazione iniziale, aggiungi un evento panelDigger(reset) e una classe panel-reset a un nuovo panel-tab e una classe panel-reset a ogni panel-block che vuoi venga mostrato sul panel resettato.

Bulma-panel.js Bulma.io Bulma.io