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
Paginare i risultati con QuickGrid in Blazor
Migrare una service connection a workload identity federation in Azure DevOps
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Installare le Web App site extension tramite una pipeline di Azure DevOps
Creare alias per tipi generici e tuple in C#
Miglioramenti nell'accessibilità con Angular CDK
Determinare lo stato di un pod in Kubernetes
Definire stili a livello di libreria in Angular
Generare file per il download da Blazor WebAssembly
Utilizzare la libreria Benchmark.NET per misurare le performance
Sfruttare lo streaming di una chiamata Http da Blazor