Tutorial Joomla | Estensioni

La selezione delle migliori estensioni per Joomla

Tabs: creare un pannello a Tab

L'estensione Tabs di Regular Labs permette di creare dei pannelli a Tab, quindi con schede di contenuto.

In questo tutorial mostriamo la versione gratuita di Tabs, che mette a disposizione molte funzionalità per la realizzazione di tab. Altre funzionalità e opzioni più elaborate ovviamente sono disponibili con la versione a pagamento.

Una volta installata l'estensione nell'editor degli articoli compare il pulsante Tabs.

 

Scegli il punto dell'articolo nel quale inserire il pannello a Tab, e clicca sul pulsante.

Scrivi il titolo della prima tab: è il titolo mostrato come linguetta nel pannello. Selezionando la linguetta l'utente vedrà la tab corrispondente.

La prima tab è aperta a livello predefinito.

L'alias va a comporre l'URL visualizzato sul browser quando si clicca sul titolo della singola tab. Viene generato automaticamente a partire dal testo del titolo, ma può essere modificato.

 

Opzionalmente puoi personalizzare lo stile dello slider, inserendo delle classi CSS. Puoi creare classi con regole di stile molto elaborate, in questo tutorial vediamo degli esempi semplici.

Puoi utilizzare delle classi già presenti per definirne il colore: blue, green, orange, red, grey. Per la prima tab impostiamo la classe green, con la quale mostriamo la scheda di colore verde. Oltre a queste, puoi utilizzare le classi di Bootstrapinfo, success, warning, danger, per contrassegnare sempre con colori diversi le tab a seconda del tipo di messaggio.  

 

Con le seguenti opzioni, che possono essere impostate a livello predefinito nelle opzioni del plugin, si controllano altri elementi di stile della singola tab.

  • Color Inactive Handles: con questa opzione le linguette delle tab non attive hanno uno sfondo grigio;
  • Outline Handles: si mostrano o meno i bordi delle linguette delle tab;
  • Outline Content: si applicano i bordi attorno al blocco di contenuto della tab;
  • Alignment Handles: si definisce l'allineamento delle linguette; a livello predefinito il valore è impostato su Auto: le linguette si allineano a sinistra o destra a seconda delle impostazioni della lingua (nel caso della lingua italiana saranno di default allineate a sinistra).

Aggiungi le altre tab del pannello.

Quindi per inserire il pannello dentro l'articolo clicca sul pulsante Inserisci della finestra di Tabs.

 

Nel contenuto dell'articolo vedi le sintassi con i tag dell'estensione, contenenti come attributi i titoli e le eventuali classi inserite. 

 

 

Inserisci il testo delle singole tab direttamente nel campo del testo dell'editor.

Sul frontend vedi il pannello a tab. L'utente cliccando sulla linguetta apre la tab corrispondente. La prima tab ha la linguetta di colore verde, come da classe applicata. Le linguette delle tab non attive sono mostrati con sfondo grigio.

 

 

È possibile anche creare un pannello a Tab annidato all'interno di una tab.

Vediamo questa possibilità. Ipotizziamo di inserire il pannello annidato in una delle tab del pannello. Seleziona nel testo il punto in cui inserirlo, dopo il tag della tab, e clicca sul pulsante Tabs.

Devi in questo caso attivare l'opzione Handle as Nested Set, scegliendo un id, cioè un dato identificativo univoco per il blocco. 

 

Crea quindi il pannello annidato, scrivendo i titoli delle tab e le eventuali classi CSS.

Nella pagina vedi all'interno della tab, il pannello a tab annidato.

 

© 2019 HOST S.p.A. - Gruppo Welcome Italia - cap. soc. € 300.000,00 i.v. Registro Imprese e c.f. IT08505460017 - R.E.A. Torino n.978572