Skip to content

Commit

Permalink
chore(docs): add warning and remove selection functionality in tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@astagi
astagi authored Nov 10, 2023
1 parent 182d7e9 commit ffafbd9
Showing 1 changed file with 56 additions and 52 deletions.
108 changes: 56 additions & 52 deletions docs/componenti/tab.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ toc: true

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`.

{% capture callout %}
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](#controllo-dei-pannelli-associati).
{% endcapture %}{% include callout.html content=callout type="warning" %}

{% capture callout %}

#### Accessibilità
Expand All @@ -31,16 +35,16 @@ Utilizzare la classe `.disabled` sul link dei tab da disabilitare, aggiungendo l
{% capture example %}
<ul class="nav nav-tabs auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Attivo</a>
<a class="nav-link active" aria-current="page">Attivo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
<a class="nav-link">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
<a class="nav-link">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabilitato</a>
<a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabilitato</a>
</li>
</ul>
{% endcapture %}{% include example.html content=example %}
Expand All @@ -53,31 +57,31 @@ Le label dei tab possono essere sostituite da icone con classi che ne indicano i
{% capture example %}
<ul class="nav nav-tabs auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<a class="nav-link active" aria-current="page">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
<span class="visually-hidden">Tab titolo 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-calendar"></use>
</svg>
<span class="visually-hidden">Tab titolo 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-comment"></use>
</svg>
<span class="visually-hidden">Tab titolo 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1">
<a class="nav-link disabled" tabindex="-1">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use>
</svg>
Expand All @@ -95,31 +99,31 @@ Per ottenere icone più grandi utilizzare la classe `.icon-lg` alle icone. Aggiu
{% capture example %}
<ul class="nav nav-tabs nav-tabs-icon-lg auto">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">
<a class="nav-link active" aria-current="page">
<svg class="icon icon-lg">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
<span class="visually-hidden">Tab titolo 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon icon-lg">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-calendar"></use>
</svg>
<span class="visually-hidden">Tab titolo 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon icon-lg">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-comment"></use>
</svg>
<span class="visually-hidden">Tab titolo 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1">
<a class="nav-link disabled" tabindex="-1">
<svg class="icon icon-lg">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use>
</svg>
Expand All @@ -137,31 +141,31 @@ Icone e testi possono convivere all'interno dei tab, l'allineamento verticale de
{% capture example %}
<ul class="nav nav-tabs nav-tabs-icon-text auto">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">
<a class="nav-link active" aria-current="page">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
Tab 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-calendar"></use>
</svg>
Tab 2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-comment"></use>
</svg>
Tab 3
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1">
<a class="nav-link disabled" tabindex="-1">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use>
</svg>
Expand All @@ -180,10 +184,10 @@ In assenza della classe `.auto` i tab vengono dimensionati in base al contenuto.
{% comment %}Example name: Orizzontali, testuali{% endcomment %}
{% capture example %}
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Tab 1 Attivo</a></li>
<li class="nav-item"><a class="nav-link" href="#">Tab 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Tab 3</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1">Tab 4 Disabilitato</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page">Tab 1 Attivo</a></li>
<li class="nav-item"><a class="nav-link">Tab 2</a></li>
<li class="nav-item"><a class="nav-link">Tab 3</a></li>
<li class="nav-item"><a class="nav-link disabled" tabindex="-1">Tab 4 Disabilitato</a></li>
</ul>
{% endcapture %}{% include example.html content=example %}

Expand All @@ -193,31 +197,31 @@ In assenza della classe `.auto` i tab vengono dimensionati in base al contenuto.
{% capture example %}
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">
<a class="nav-link active" aria-current="page">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
<span class="visually-hidden">Tab titolo 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-calendar"></use>
</svg>
<span class="visually-hidden">Tab titolo 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-comment"></use>
</svg>
<span class="visually-hidden">Tab titolo 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1">
<a class="nav-link disabled" tabindex="-1">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use>
</svg>
Expand All @@ -233,31 +237,31 @@ In assenza della classe `.auto` i tab vengono dimensionati in base al contenuto.
{% capture example %}
<ul class="nav nav-tabs nav-tabs-icon-lg">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">
<a class="nav-link active" aria-current="page">
<svg class="icon icon-lg">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
<span class="visually-hidden">Tab titolo 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon icon-lg">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-calendar"></use>
</svg>
<span class="visually-hidden">Tab titolo 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon icon-lg">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-comment"></use>
</svg>
<span class="visually-hidden">Tab titolo 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1">
<a class="nav-link disabled" tabindex="-1">
<svg class="icon icon-lg">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use>
</svg>
Expand All @@ -273,31 +277,31 @@ In assenza della classe `.auto` i tab vengono dimensionati in base al contenuto.
{% capture example %}
<ul class="nav nav-tabs nav-tabs-icon-text">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">
<a class="nav-link active" aria-current="page">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
Tab 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-calendar"></use>
</svg>
Tab 2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-comment"></use>
</svg>
Tab 3
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1">
<a class="nav-link disabled" tabindex="-1">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use>
</svg>
Expand Down Expand Up @@ -329,55 +333,55 @@ Se i tab contengono icone è necessario aggiungere un'ulteriore classe al wrappe
<div class="nav-tabs-hidescroll hidescroll-ico">
<ul class="nav nav-tabs nav-tabs-icon-text">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">
<a class="nav-link active" aria-current="page">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
Tab 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
Tab 2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
Tab 3
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
Tab 4
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
Tab 5
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
Tab 6
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<a class="nav-link">
<svg class="icon">
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use>
</svg>
Expand Down Expand Up @@ -670,10 +674,10 @@ Per posizionare i tab verticali a destra contenuto è necessario applicare la cl
{% comment %}Example name: Con controllo pannelli, sfondo scuro, orizzontale a tutta larghezza{% endcomment %}
{% capture example %}
<ul class="nav nav-tabs auto nav-dark">
<li class="nav-item"><a class="nav-link active" href="#">Tab 1 Attivo</a></li>
<li class="nav-item"><a class="nav-link" href="#">Tab 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Tab 3</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1">Tab 4 Disabilitato</a></li>
<li class="nav-item"><a class="nav-link active">Tab 1 Attivo</a></li>
<li class="nav-item"><a class="nav-link">Tab 2</a></li>
<li class="nav-item"><a class="nav-link">Tab 3</a></li>
<li class="nav-item"><a class="nav-link disabled" tabindex="-1">Tab 4 Disabilitato</a></li>
</ul>
{% endcapture %}{% include example.html content=example %}

Expand All @@ -682,10 +686,10 @@ Per posizionare i tab verticali a destra contenuto è necessario applicare la cl
{% comment %}Example name: Con controllo pannelli, sfondo scuro, orizzontale a tutta larghezza, testo e icona{% endcomment %}
{% capture example %}
<ul class="nav nav-tabs nav-tabs-icon-text nav-dark">
<li class="nav-item"><a class="nav-link active" href="#"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use></svg> Tab 1</a></li>
<li class="nav-item"><a class="nav-link" href="#"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use></svg> Tab 2</a></li>
<li class="nav-item"><a class="nav-link" href="#"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use></svg> Tab 3</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use></svg> Tab 4</a></li>
<li class="nav-item"><a class="nav-link active"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use></svg> Tab 1</a></li>
<li class="nav-item"><a class="nav-link"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use></svg> Tab 2</a></li>
<li class="nav-item"><a class="nav-link"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use></svg> Tab 3</a></li>
<li class="nav-item"><a class="nav-link disabled" tabindex="-1"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-link"></use></svg> Tab 4</a></li>
</ul>
{% endcapture %}{% include example.html content=example %}

Expand Down Expand Up @@ -770,23 +774,23 @@ Aggiungere le classi `.nav-tabs-editable` e `.nav-tabs-cards` al tag `ul` per ot
<ul class="nav nav-tabs nav-tabs-cards nav-tabs-editable" id="card-simple-btn" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="card-simple-btn1-tab" data-bs-toggle="tab" href="#card-simple-btntab1" role="tab" aria-controls="card-simple-btntab1" aria-selected="true">Tab 1 </a>
<a href="#" class="nav-link-close"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg><span class="visually-hidden"> Chiudi tab 1</span></a>
<a class="nav-link-close" href="#"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg><span class="visually-hidden"> Chiudi tab 1</span></a>
</li>
<li class="nav-item">
<a class="nav-link" id="card-simple-btn2-tab" data-bs-toggle="tab" href="#card-simple-btntab2" role="tab" aria-controls="card-simple-btntab2" aria-selected="false">Tab 2</a>
<a href="#" class="nav-link-close"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg><span class="visually-hidden"> Chiudi tab 2</span></a>
<a class="nav-link-close" href="#"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg><span class="visually-hidden"> Chiudi tab 2</span></a>
</li>
<li class="nav-item">
<a class="nav-link" id="card-simple-btn3-tab" data-bs-toggle="tab" href="#card-simple-btntab3" role="tab" aria-controls="card-simple-btntab3" aria-selected="false">Tab 3</a>
<a href="#" class="nav-link-close"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg><span class="visually-hidden"> Chiudi tab 3</span></a>
<a class="nav-link-close" href="#"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg><span class="visually-hidden"> Chiudi tab 3</span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="card-simple-btn4-tab" data-bs-toggle="tab" href="#card-simple-btntab4" role="tab" aria-controls="card-simple-btntab4" aria-selected="false" aria-disabled="true" tabindex="-1">Tab 4 Disabilitato</a>
<a href="#" class="nav-link-close disabled"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg><span class="visually-hidden"> Chiudi tab 4</span></a>
<a class="nav-link-close disabled" href="#"><svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg><span class="visually-hidden"> Chiudi tab 4</span></a>
</li>
<li class="nav-item-filler"></li>
<li class="nav-item">
<a href="#" class="nav-tab-add"><span class="visually-hidden"> Aggiungi un tab</span></a>
<a class="nav-tab-add"><span class="visually-hidden"> Aggiungi un tab</span></a>
</li>
</ul>
</div>
Expand Down

0 comments on commit ffafbd9

Please sign in to comment.