Molto spesso le pagine web devono mostrare molti dati e metterli tutti insieme può risultare in una scarsa leggibilità della pagina. In questi casi una delle tecniche più ricorrenti per organizzare i dati è quella di usare i tab. Bootstrap ci permette di creare una struttura a tab con pochissimo codice e soprattutto senza dover scrivere una riga di codice JavaScript in quanto il codice necessario è contenuto nel suo file JavaScript. Nel prossimo esempio vediamo come creare una pagina con due tab.
<div role="tabpanel"> <!-- Tab --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#tab1" role="tab" data-toggle="tab">Tab1</a> </li> <li role="presentation"> <a href="#tab2" role="tab" data-toggle="tab">Tab2</a> </li> </ul> <!-- Contenuto tab --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="tab1">...<div> <div role="tabpanel" class="tab-pane" id="tab2">...</div> </div> </div>
Come si vede dallo script, la struttura è composta da un tag "div" principale che contiene prima un tag "ul" all'interno del quale specifichiamo i tab, e poi un tag "div" all'interno del quale specifichiamo un "div" per il contenuto di ogni tab. Per mostrare il "div" collegato al tab, la proprietà "id" del "div" deve corrispondere alla proprietà "href" del tag "a" presente nel tab.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Disabilitare automaticamente un workflow di GitHub (parte 2)
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Usare un KeyedService di default in ASP.NET Core 8
Usare lo spread operator con i collection initializer in C#
Utilizzare Tailwind CSS all'interno di React: primi componenti
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Eseguire attività con Azure Container Jobs
Short-circuiting della Pipeline in ASP.NET Core
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Gestire i null nelle reactive form tipizzate di Angular
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript