I componenti OffCanvas, o blade in Azure, sono delle sidebar che appaiono o scompaiono a seguito di un iterazione con l'utente. Il loro funzionamento è simile ad una modale, ciò che cambia è la posizione e il contesto di utilizzo.
È un componente abbastanza insolito da trovare nel panorama web, ma il suo utilizzo si sta espandendo, tanto che lo troviamo anche quando mettiamo un articolo nel carrello di Amazon.
Il vantaggio dell'integrazione con Bootstrap è la facilità di inizializzazione e utilizzo: come abbiamo già detto è molto simile a una modale, e lo è anche il codice.
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasLabel">Titolo</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> Contenuto </div> </div>
A questo va ovviamente aggiunto il bottone che permette di visualizzare il componente. Anche in questo caso andiamo sul sicuro utilizzando gli attributi data-bs-toggle e data-bs-target.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas"> Apri </button>
Così come per le modali abbiamo a disposizione delle opzioni riguardanti le dimensioni, qui troviamo delle classi che ci permettono di posizionare l'OffCanvas all'interno della pagina.
<div class="offcanvas offcanvas-start"><!-- sinistra --></div> <div class="offcanvas offcanvas-end"><!-- destra --></div> <div class="offcanvas offcanvas-top"><!-- sopra --></div> <div class="offcanvas offcanvas-bottom"><!-- sotto --></div>
Avendo poi delle caratteristiche da sidebar possiamo decidere di rimuovere il backdrop, o sfondo nero, e abilitare lo scroll sul contenuto della pagina.
<div class="offcanvas offcanvas-start" data-bs-scroll="true"> <!-- abilita lo scroll --> </div> <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false"> <!-- rimuove il backdrop --> </div>
Nel caso in cui uil codice HTML dell'elemento venga inserito solo dopo il primo caricamento della pagina, possiamo attivare il componente tramite JavaScript.
var offcanvas = document.getElementById('offcanvas'); var bsOffcanvas = new bootstrap.Offcanvas(offcanvas);
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Le novità di .NET 6 e C# 10
Compilare automaticamente applicazioni .NET 6 con le pipeline di Azure DevOps e GitHub Action
Ottimizzare la concorrenza dinamicamente con le Azure Function
GitHub e .NET 6
Code reviewers as code in GitHub
Avviare e arrestare programmaticamente un Hosted Service di ASP.NET Core
Produrre un inventario automatico di Azure Storage
Code generator con C#
Completare le informazioni di log in Entity Framework Core
Comprimere le immagini contenute in un repository con una GitHub Action
Certificati TLS gestiti con Azure API Management
Configurare EF Core 6 con le minimal API di ASP.NET