<

Tabs

Ultima modifica: 30 Agosto 2024

Il wordpress Gpci framework comprende il pattern tabs: sono le classiche schede attivabili tramite pulsanti. Non c'è alcun bisogno di impostare id, attributi o altro, viene tutto impostato automaticamente dal framework tramite javascript; l'unico requisito è rispettare la struttura di costruzione del pattern.

Struttura del pattern

Il pattern tabs è composto da:

Contenitore del pattern

Nel controllo javascript è inserito il codice che gestisce i click sui pulsanti, nel controllo css è inserito il codice grafico ( sarebbe meglio, se il pattern è inserito in un loop o in molte zone della pagina, spostarlo a livello pagina/globale/template ).

Contenitore dei pulsanti

Inserire all'interno i pulsanti che gestiranno la visualizzazione del contenuto correlato: il primo pulsante mostrerà il primo contenuto, il secondo pulsante il secondo contenuto e così via.

Contenitore dei contenuti

Inserire all'interno un blocco contenitore per ogni contenuto, il contenitore chiaramente conterrà i blocchi che saranno il vero e proprio contenuto.

Scheda iniziale

Per visualizzare subito una scheda al caricamento della pagina rimuovere semplicemente l'attributo hidden dal contenitore del contenuto che si vuole visualizzare all'inizio.

Controllo di pulsante attivo

Per impostazione predefinita quando si clicca sul pulsante attivo andrà nello stato non attivo e il contenuto sarà nascosto, se non si vuole questo comportamento settare nella funzione javascript GpciPatternTabsDisplayContent (all'interno del controllo) il parametro InvertingButton su false.

Note

Se si vuole utilizzare un altro blocco al posto del pulsante gpci/button per mostrare/nascondere i contenuti è necessario modificare i selettori in querySelector all'interno del controllo javascript, stessa cosa per i contenitori. A conti fatti la struttura più importante da rispettare è il contenitore principale e i 2 contenitori interni (pulsanti e contenuti).

Esempi

Esempio 1: tabs orizzontali con contenuto in basso

Queste sono le classiche schede orizzontali con contenuto sottostante. Per impostazione predefinita il pattern si presenta così.

Esempio 2: tabs orizzontali con contenuto in alto

Come esempio 1 ma le schede sono in basso; è sufficiente spostare il contenitore dei pulsanti sopra:

Esempio 3: tabs verticali con contenuto a destra

Come prima ma le schede sono in verticale e a sinistra; per fare questo basta aggiungere il css:

  • contenitore generale - display:flex
  • contenitore pulsanti - flex-direction:column

Esempio 4: tabs orizzontali con contenuto in basso e scheda 2 visibile subito

Per fare questo è sufficiente rimuovere l'attributo hidden dal secondo contenitore del contenuto:

contenuto seconda tab

Esempio 5: come il pattern predefinito ma senza animazione

Eliminando l'animazione del pattern, il css relativo alle dimensioni e alle spaziature degli elementi è più semplice da configurare, inoltre l'altezza del contenuto nascosto è zero. Per farlo, eliminare o commentare, nel controllo css, dalla riga /*per animazione*/ in poi: