Tab

Indice dei contenuti

Il plugin Tab consente la creazione di pannelli dinamici con navigazione a tab.

Markup HTML di base

La struttura di un pannello con tab è suddivisa in due parti.

La prima è costituita dalle tab vere e proprie, ovvero la parte di navigazione.

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab-1" data-toggle="tab">Lorem ipsum</a></li>
  <li><a href="#tab-2" data-toggle="tab">Sit dolor</a></li>
  <li><a href="#tab-3" data-toggle="tab">Adipiscing nunc</a></li>
  <li><a href="#tab-4" data-toggle="tab">Condimentum diam</a></li>
</ul>

Si parte con una ul con le classi nav e nav-tabs.

Al suo interno si creano tanti li quanti sono le schede del pannello.

All'interno di ogni li si inserisce un link che deve avere l'attributo href valorizzato con l'àncora corrispondente all'id della scheda e l'attributo data-toggle="tab" che tramite la Data API di Bootstrap apre la scheda via Javascript.

Con la classe .active si specifica l'elemento attivo, ovvero il pannello inizialmente aperto.

La seconda sezione del pannello è rappresentata dalle schede.

<div class="tab-content">
<div class="tab-pane active" id="tab-1">
 <p>Vivamus imperdiet condimentum diam...</p>
</div>
<div class="tab-pane" id="tab-2">
 <p>Donec id elit non mi porta gravida...</p>
</div>
<div class="tab-pane" id="tab-3">
 <p>Vivamus imperdiet condimentum diam...</p>
</div>
<div class="tab-pane" id="tab-4">
 <p>Donec id elit non mi porta gravida...</p>
</div>
</div>

Le schede vanno racchiuse in un div con classe .tab-content.

All'interno, si creano tanti div con classe .tab-pane quante sono le schede. Ciascun div deve avere un id corrispondente a quelli indicati nella parte di navigazione a tab.

Anche in questo caso, il pannello inizialmente aperto deve avere la classe .active.

Ecco il codice completo del componente:

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab-1" data-toggle="tab">Lorem ipsum</a></li>
  <li><a href="#tab-2" data-toggle="tab">Sit dolor</a></li>
  <li><a href="#tab-3" data-toggle="tab">Adipiscing nunc</a></li>
  <li><a href="#tab-4" data-toggle="tab">Condimentum diam</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-1">
 <p>Vivamus imperdiet condimentum diam...</p>
</div>
<div class="tab-pane" id="tab-2">
 <p>Donec id elit non mi porta gravida...</p>
</div>
<div class="tab-pane" id="tab-3">
 <p>Vivamus imperdiet condimentum diam...</p>
</div>
<div class="tab-pane" id="tab-4">
 <p>Donec id elit non mi porta gravida...</p>
</div>
</div>

Vivamus imperdiet condimentum diam, eget placerat felis consectetur id. Donec eget orci metus, ac adipiscing nunc. Pellentesque fermentum, ante ac interdum ullamcorper. Donec eget orci metus, ac adipiscing nunc. Pellentesque fermentum, ante ac interdum ullamcorper.

Vivamus imperdiet condimentum diam, eget placerat felis consectetur id. Donec eget orci metus, ac adipiscing nunc.

Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus, tellus ac cursus comodo egetine metuss gorp.

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus etiam sem...

Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus, tellus ac cursus comodo egetine metuss gorp.

Vivamus imperdiet condimentum diam, eget placerat felis consectetur id. Donec eget orci metus, ac adipiscing nunc.

Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus, tellus ac cursus comodo egetine metuss gorp.

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus etiam sem...

Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus, tellus ac cursus comodo egetine metuss gorp.

Guida Boostrap 3 - Reference

Indice dei contenuti

Markup HTML di base