Documentazione ed esempi sull’utilizzo del componente Tab.
L’interfaccia a tab (o schede) di Bootstrap si basa sull’utilizzo del layout di navigazione, con l’aggiunta della classe .nav-tabs. Per ottenere una versione con sfondo scuro e testo chiaro bisognerà aggiungere un’ulteriore classe: .nav-dark.
La maggior parte degli esempi riguardanti il componente Tab non hanno pannelli di contenuto associati, pertanto la funzionalità per selezionare il pannello risulterà disattivata. Per vedere il componente Tab in azione fare riferimento alla sezione Controllo dei pannelli associati.
Accessibilità
Le interfacce a tab, come descritto nelle pratiche di implementazione WAI ARIA, richiedono l’utilizzo di attributi role="tablist", role="tab", role="tabpanel", e ulteriori attributi aria-, al fine di trasmettere la loro struttura, funzionalità e stato attuale agli utenti delle tecnologie assistive (come i lettori di schermo).
Nota che le interfacce dinamiche a tab non devono contenere menu a discesa, poiché ciò causa problemi di usabilità e accessibilità. Dal punto di vista dell’usabilità, il fatto che l’elemento trigger del tab attualmente visualizzato non sia immediatamente visibile (dato che si trova all’interno del menu a discesa chiuso) può causare confusione.
Tab orizzontali a tutta larghezza
Aggiungendo la classe .auto al contenitore .nav-tabs i tab occupano automaticamente l’intera larghezza disponibile. Se su schermi particolarme piccoli (es: smartphone) le dimensioni dei tab dovessero superare quelle dello schermo, verrà attivato lo scrolling orizzontale dei tab stessi.
Tab testuale
Lo stato dei tab può essere attivo, non attivo e disabilitato.
Utilizzare la classe .active sul link del tab attivo per default.
Utilizzare la classe .disabled sul link dei tab da disabilitare, aggiungendo la proprietà tabindex="-1" per eliminarlo dalla sequenza di navigazione via tab.
Le label dei tab possono essere sostituite da icone con classi che ne indicano il tipo, avendo cura di includere all’interno del link un elemento <span> con classe .visually-hidden contenente la descrizione dedicata agli screen reader. La classe .visually-hidden impedisce la visualizzazione del testo sui browser visuali.
<ulclass="nav nav-tabs auto"><liclass="nav-item"><aclass="nav-link active"aria-current="page"><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg><spanclass="visually-hidden">Tab titolo 1</span></a></li><liclass="nav-item"><aclass="nav-link"><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-calendar"></use></svg><spanclass="visually-hidden">Tab titolo 2</span></a></li><liclass="nav-item"><aclass="nav-link"><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-comment"></use></svg><spanclass="visually-hidden">Tab titolo 3</span></a></li><liclass="nav-item"><aclass="nav-link disabled"tabindex="-1"><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-close"></use></svg><spanclass="visually-hidden">Tab titolo 4</span></a></li></ul>
Tab con icona grande
Per ottenere icone più grandi utilizzare la classe .icon-lg alle icone. Aggiungere la classe .nav-tabs-icon-lg al contenitore .nav-tabs per ottimizzare i margini fra tab.
<ulclass="nav nav-tabs nav-tabs-icon-lg auto"><liclass="nav-item"><aclass="nav-link active"aria-current="page"><svgclass="icon icon-lg"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg><spanclass="visually-hidden">Tab titolo 1</span></a></li><liclass="nav-item"><aclass="nav-link"><svgclass="icon icon-lg"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-calendar"></use></svg><spanclass="visually-hidden">Tab titolo 2</span></a></li><liclass="nav-item"><aclass="nav-link"><svgclass="icon icon-lg"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-comment"></use></svg><spanclass="visually-hidden">Tab titolo 3</span></a></li><liclass="nav-item"><aclass="nav-link disabled"tabindex="-1"><svgclass="icon icon-lg"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-close"></use></svg><spanclass="visually-hidden">Tab titolo 4</span></a></li></ul>
Tab con testo e icona
Icone e testi possono convivere all’interno dei tab, l’allineamento verticale dei due elementi è automatico. Per ottenere il corretto margine fra testo e icona nei tab a sviluppo orizzontale è necessario aggiungere la classe .nav-tabs-icon-text al contenitore .nav-tabs.
<ulclass="nav nav-tabs"><liclass="nav-item"><aclass="nav-link active"aria-current="page"><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg><spanclass="visually-hidden">Tab titolo 1</span></a></li><liclass="nav-item"><aclass="nav-link"><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-calendar"></use></svg><spanclass="visually-hidden">Tab titolo 2</span></a></li><liclass="nav-item"><aclass="nav-link"><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-comment"></use></svg><spanclass="visually-hidden">Tab titolo 3</span></a></li><liclass="nav-item"><aclass="nav-link disabled"tabindex="-1"><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-close"></use></svg><spanclass="visually-hidden">Tab titolo 4</span></a></li></ul>
<ulclass="nav nav-tabs nav-tabs-icon-lg"><liclass="nav-item"><aclass="nav-link active"aria-current="page"><svgclass="icon icon-lg"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg><spanclass="visually-hidden">Tab titolo 1</span></a></li><liclass="nav-item"><aclass="nav-link"><svgclass="icon icon-lg"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-calendar"></use></svg><spanclass="visually-hidden">Tab titolo 2</span></a></li><liclass="nav-item"><aclass="nav-link"><svgclass="icon icon-lg"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-comment"></use></svg><spanclass="visually-hidden">Tab titolo 3</span></a></li><liclass="nav-item"><aclass="nav-link disabled"tabindex="-1"><svgclass="icon icon-lg"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-close"></use></svg><spanclass="visually-hidden">Tab titolo 4</span></a></li></ul>
Se per motivi estetici si volessero nascondere le scrollbar che appaiono sui dispositivi touch quando vengono scrollati orizzontalmente i tab sarà necessario inserire l’html dei tab all’interno di un wrapper con classe .nav-tabs-hidescroll.
1
2
3
<divclass="nav-tabs-hidescroll"><!-- HTML dei tab --></div>
Se i tab contengono icone è necessario aggiungere un’ulteriore classe al wrapper:
Gli esempi sopra riportati non hanno molto senso senza un contenuto che cambi al di sotto di essi; per rendere tali interfacce navigabili è necessario collegare Tab e Pannelli collegando il tag <a> dei primi all’attributo id dei secondi, come mostrato di seguito:
Allo stesso modo di quanto avviene con i normali .nav, a seconda delle tue necessità, è possibile modificare tale codice con un markup diverso, diverso dalla classica lista basata su <ul>. È importante notare però, che nel caso si desideri usare l’elemento <nav>, l’attributo role="tablist" non deve essere applicato direttamente su di esso, in quanto sovrascriverebbe il ruolo dell’elemento stesso per la navigazione.
Si può, alternativamente, usare un diverso elemento (nell’esempio seguente un semplice <div>) e racchiuderlo con <nav>:
Utilizzando gli strumenti di layout di Bootstrap 5 è possibile realizzare tab a orientamento verticale. Al <div> contenitore dei link dei tab va aggiunta la classe .nav-tabs-vertical.
Le label dei Tab possono essere sostituite da icone, avendo cura di includere all’interno del link un elemento <span> contenente la descrizione per non gli screen reader del tab con classe .visually-hidden per nascondere la descrizione agli altri browser. Al tag <a> contenente l’icona va aggiunta la classe .justify-content-end per allineare l’icona a destra.
<divclass="bd-example-tabs"><divclass="row"><divclass="col-3"><divclass="nav nav-tabs nav-tabs-vertical"id="nav-vertical-tab-ico-only"role="tablist"aria-orientation="vertical"><aclass="nav-link justify-content-end active"id="nav-vertical-tab-ico-only1-tab"data-bs-toggle="tab"href="#nav-vertical-tab-ico-only1"role="tab"aria-controls="nav-vertical-tab-ico-only1"aria-selected="true"><spanclass="visually-hidden">Tab titolo 1</span><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg></a><aclass="nav-link justify-content-end"id="nav-vertical-tab-ico-only2-tab"data-bs-toggle="tab"href="#nav-vertical-tab-ico-only2"role="tab"aria-controls="nav-vertical-tab-ico-only2"aria-selected="false"><spanclass="visually-hidden">Tab titolo 2</span><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-calendar"></use></svg></a><aclass="nav-link justify-content-end"id="nav-vertical-tab-ico-only3-tab"data-bs-toggle="tab"href="#nav-vertical-tab-ico-only3"role="tab"aria-controls="nav-vertical-tab-ico-only3"aria-selected="false"><spanclass="visually-hidden">Tab titolo 3</span><svgclass="icon"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-comment"></use></svg></a></div></div><divclass="col-9"><divclass="tab-content"id="nav-vertical-tab-ico-onlyContent"><divclass="tab-pane p-3 fade show active"id="nav-vertical-tab-ico-only1"role="tabpanel"aria-labelledby="nav-vertical-tab-ico-only1-tab">Contenuto 1</div><divclass="tab-pane p-3 fade"id="nav-vertical-tab-ico-only2"role="tabpanel"aria-labelledby="nav-vertical-tab-ico-only2-tab">Contenuto 2</div><divclass="tab-pane p-3 fade"id="nav-vertical-tab-ico-only3"role="tabpanel"aria-labelledby="nav-vertical-tab-ico-only3-tab">Contenuto 3</div></div></div></div></div>
Posizione dei Tab
Per questioni di accessibilità è preferibile utilizzare le proprietà Flex di CSS a un cambio di posizione dei Tab nell’HTML. Per garantire un flusso di lettura naturale della pagina i tab di navigazione devono precedere il contenuto a loro associato.
Orizzontale in fondo
Per posizionare i tab al di sotto del contenuto è necessario utilizzare un elemento contenitore (ad esempio un <div>) con classi .d-flex e .flex-column-reverse.
Aggiungere le classi .nav-tabs-editable e .nav-tabs-cards al tag ul per ottenere un design tipo card editabili. Includere l’hmtl degli ulteriori elementi di interfaccia come da esempio.
Per fare in modo che i tab appaiano con un’animazione “a comparsa” (fade in), è sufficiente aggiungere la classe .fade ad ogni .tab-pane. Il primo .tab-pane dovrà anche avere la classe .show per rendere il contenuto iniziale visibile.
1
2
3
4
5
6
<divclass="tab-content"><divclass="tab-pane fade show active"id="tab1"role="tabpanel"aria-labelledby="content-tab-tab">...</div><divclass="tab-pane fade"id="tab2"role="tabpanel"aria-labelledby="tab2-tab">...</div><divclass="tab-pane fade"id="tab3"role="tabpanel"aria-labelledby="tab3-tab">...</div><divclass="tab-pane fade"id="tab4"role="tabpanel"aria-labelledby="tab4-tab">...</div></div>
Si possono trovare dettagli aggiuntivi sulla gestione attraverso JavaScript di metodi ed eventi sui tab alla pagina corrispondente sul sito di Bootstrap.
Attivazione tramite codice
Nel caso in cui si desidera che il componente sia inizializzato in maniera automatica
utilizzare l’attributo data-bs-toggle specifico per la sua inizializzazione.
Nel caso in cui si desidera importare e inizializzare autonomamente il componente
l’attributo data-bs-toggle specifico non deve essere incluso così da evitare
inizializzazioni automatiche che possono portare a comportamenti inaspettati.
Puoi attivare una navigazione a tab senza scrivere JavaScript, semplicemente utilizzando la proprietà data-bs-toggle="tab" nel link all’interno di liste di tipo .nav-tabs:
Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM, è possibile utilizzarlo in questo modo: Tab.getInstance(domElement).
getOrCreateInstance
Metodo statico che restituisce un'istanza di avviso associata a un elemento DOM o ne crea una nuova nel caso in cui non fosse stata inizializzata. Puoi utilizzarla in questo modo: Tab.getOrCreateInstance(element).
dispose
Rimuove la funzionalità Tab.
Breaking change
Sono stati rimossi gli elementi delle liste con classe nav-item-filler per
tutte le tab di tipo Card.