Tab bar
La Tab bar organizza e permette la navigazione tra gruppi di contenuti che sono tra loro correlati ed allo stesso livello di gerarchia.
Ogni tab dovrebbe mostrare un contenuto distinto dalle altre. A tal proposito, le tab non devono essere usate per spezzare un contenuto che ha bisogno di essere letto in un dato ordine.
Le label delle tab devono essere corte e non abbreviate, a meno che non sia strettamente necessario.
Le tab con solo testo, con icona e con testo e icona non vanno mai mescolate.
Ogni bar deve contenere tab dello stesso tipo.
<ul class="nav nav-tabs nav-tabs-icon-text icon-right">
<li class="nav-item">
<a class="nav-link" href="#">
Label
<svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-star-outline"></use></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Label
<svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pa"></use></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">
Label
<svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-comment"></use></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1">
Label
<svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-copy"></use></svg>
</a>
</li>
</ul>Accessibilità
Nel caso di di Tab bar con solo icone è obbligatorio fornire una descrizione in uno span di classe visually-hidden o con un testo alternativo, in modo che possa essere utilizzato anche da i non vedenti.
Inoltre, poichè il significato dell’icona non sempre risulta chiaro per gli utenti anche per gli utenti normodotati, è fortemente consigliato aggiungere un tooltip per aiutare la comprensione.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label">
<svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-star-outline"></use></svg>
<span class="visually-hidden">Breve testo esplicativo</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label">
<svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pa"></use></svg>
<span class="visually-hidden">Breve testo esplicativo</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label">
<svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-comment"></use></svg>
<span class="visually-hidden">Breve testo esplicativo</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label" tabindex="-1">
<svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-copy"></use></svg>
<span class="visually-hidden">Breve testo esplicativo</span>
</a>
</li>
</ul>
Abilitazione tooltip
Per abilitare il funzionamento dei tooltip, nella pagina deve essere inserito il seguente codice:
<script>
document.addEventListener("DOMContentLoaded", function() {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
})
</script>