Tabs
Organizza i contenuti in schede indipendenti a comparsa.
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.
Opzionalmente, è possibile aggiungere al bottone della tab un'icona, utilizzando un file svg.
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.
In assenza della classe .auto i tab vengono dimensionati in base al contenuto.
Contenuto 1
Contenuto 2
<ul class="nav nav-tabs nav-tabs-icon-text" id="myTab3" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1c-tab" data-toggle="tab" href="#tab1b" role="tab" aria-controls="tab1b" aria-selected="true">
<svg class="icon icon-primary"><use xlink:href="./dist/svg/sprite.svg#it-link"></use></svg> Tab 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab2b-tab" data-toggle="tab" href="#tab2b" role="tab" aria-controls="tab2b" aria-selected="false">
<svg class="icon icon-primary"><use xlink:href="./dist/svg/sprite.svg#it-link"></use></svg> Tab 2
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="tab4b-tab" data-toggle="tab" href="#tab4b" role="tab" aria-controls="tab3b" aria-selected="false" aria-disabled="true" tabindex="-1">
<svg class="icon icon-primary"><use xlink:href="./dist/svg/sprite.svg#it-link"></use></svg> Tab 3 disabilitata
</a>
</li>
</ul>
<div class="tab-content" id="myTab3Content">
<div class="tab-pane p-4 fade show active" id="tab1b" role="tabpanel" aria-labelledby="tab1c-tab"><p>Contenuto 1</p></div>
<div class="tab-pane p-4 fade" id="tab2b" role="tabpanel" aria-labelledby="tab2b-tab"><p>Contenuto 2</p></div>
<div class="tab-pane p-4 fade" id="tab4b" role="tabpanel" aria-labelledby="tab4b-tab">Contenuto 3 (non raggiungibile, il tab relativo è disabilitato)</div>
</div>Tab orizzontali solo icone
Qualora si utilizzassero solo icone per la navigazione fra tab, si abbia la cura di includere all’interno del link un elemento <span> con classe .sr-only contenente la descrizione dedicata agli screen reader. La classe .sr-only impedisce la visualizzazione del testo sui browser visuali.
Contenuto 1
Contenuto 2
<ul class="nav nav-tabs nav-tabs-icon-text" id="myTab4" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1c-tab" data-toggle="tab" href="#tab1c" role="tab" aria-controls="tab1c" aria-selected="true">
<svg class="icon icon-primary"><use xlink:href="./dist/svg/sprite.svg#it-link"></use></svg>
<span class="sr-only">Tab titolo 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab2c-tab" data-toggle="tab" href="#tab2c" role="tab" aria-controls="tab2c" aria-selected="false">
<svg class="icon icon-primary"><use xlink:href="./dist/svg/sprite.svg#it-link"></use></svg>
<span class="sr-only">Tab titolo 2</span>
</a>
</li>
</ul>
<div class="tab-content" id="myTab3Content">
<div class="tab-pane p-4 fade show active" id="tab1c" role="tabpanel" aria-labelledby="tab1c-tab"><p>Contenuto 1</p></div>
<div class="tab-pane p-4 fade" id="tab2c" role="tabpanel" aria-labelledby="tab2c-tab"><p>Contenuto 2</p></div>
</div>Tab verticali
Utilizzando gli strumenti di layout di Bootstrap 4 è possibile realizzare tab a orientamento verticale. Al <div> contenitore dei link dei tab va aggiunta la classe .nav-tabs-vertical. Per quanto riguarda l'uso delle icone e delle indicazioni per gli screen reader, non vi sono differenze rispetto a quanto detto per le tab orizzontali.
<div class="bd-example-tabs">
<div class="row">
<div class="col-4 col-md-3">
<div class="nav nav-tabs nav-tabs-vertical" id="nav-vertical-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="nav-vertical-tab1-tab" data-toggle="tab" href="#nav-vertical-tab1" role="tab" aria-controls="nav-vertical-tab1" aria-selected="true">Tab 1</a>
<a class="nav-link" id="nav-vertical-tab2-tab" data-toggle="tab" href="#nav-vertical-tab2" role="tab" aria-controls="nav-vertical-tab2" aria-selected="false">Tab 2</a>
<a class="nav-link" id="nav-vertical-tab3-tab" data-toggle="tab" href="#nav-vertical-tab3" role="tab" aria-controls="nav-vertical-tab3" aria-selected="false">Tab 3</a>
</div>
</div>
<div class="col-8 col-md-9">
<div class="tab-content" id="nav-vertical-tabContent">
<div class="tab-pane p-3 fade show active" id="nav-vertical-tab1" role="tabpanel" aria-labelledby="nav-vertical-tab1-tab">Contenuto 1</div>
<div class="tab-pane p-3 fade" id="nav-vertical-tab2" role="tabpanel" aria-labelledby="nav-vertical-tab2-tab">Contenuto 2</div>
<div class="tab-pane p-3 fade" id="nav-vertical-tab3" role="tabpanel" aria-labelledby="nav-vertical-tab3-tab">Contenuto 3</div>
</div>
</div>
</div>
</div>Su sfondo scuro
Per visualzzare le tab su sfondo scuro, utilizzare la classe .nav-dark associandola al tag ul.
Contenuto 1
Contenuto 2
<ul class="nav nav-tabs nav-tabs-icon-text nav-dark" id="myTab54" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1d-tab" data-toggle="tab" href="#tab1d" role="tab" aria-controls="tab1d" aria-selected="true">
<svg class="icon icon-primary"><use xlink:href="./dist/svg/sprite.svg#it-link"></use></svg>Tab 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab2d-tab" data-toggle="tab" href="#tab2d" role="tab" aria-controls="tab2d" aria-selected="false">
<svg class="icon icon-primary"><use xlink:href="./dist/svg/sprite.svg#it-link"></use></svg>Tab 2
</a>
</li>
</ul>
<div class="tab-content" id="myTab3Content">
<div class="tab-pane p-4 fade show active" id="tab1d" role="tabpanel" aria-labelledby="tab1d-tab"><p>Contenuto 1</p></div>
<div class="tab-pane p-4 fade" id="tab2d" role="tabpanel" aria-labelledby="tab2d-tab"><p>Contenuto 2</p></div>
</div>