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ì.
contenuto prima tab
contenuto seconda tab
contenuto terza tab
Esempio 2: tabs orizzontali con contenuto in alto
Come esempio 1 ma le schede sono in basso; è sufficiente spostare il contenitore dei pulsanti sopra:
contenuto prima tab
contenuto seconda tab
contenuto terza tab
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
contenuto 1
contenuto 2
contenuto 3
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 prima tab
contenuto seconda tab
contenuto terza 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:
contenuto prima tab
contenuto seconda tab
contenuto terza tab