Bootstrap contiene gli stili per creare bottoni con una freccia sulla destra. Al click della freccia viene mostrata una lista di link che possiamo personalizzare secondo le nostre esigenze. Questo comportamento visuale è del tutto assimilabile a quello di una classica dropdown, quindi possiamo usare gli stili di Bootstrap per creare una dropdown personalizzata.
Il codice sottostante mostra come creare la drop down.
<div class="btn-group"> <button type="button" class="btn btn-default" id="itemTypeDescription">Select</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="javascript:;">Item1</li> <li><a href="javascript:;">Item2</li> <li><a href="javascript:;">Item3</li> </ul> </div>
Il primo bottone mostra il testo dell'elemento selezionato, mentre il secondo mostra la freccia della dropdown. Il tag ul contiene invece la lista degli elementi da mostrare nella dropdown.
Una volta disegnata la dropdown, dobbiamo gestire il click sui link della lista per cambiare il testo del primo bottone con quello del lik selezionato. Il prossimo esempio di codice mostra come fare.
$(".dropdown-menu a").on("click", function () { $("#itemTypeDescription").html($(this).html()); });
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Utilizzare i primary constructor di C# per inizializzare le proprietà
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Potenziare Azure AI Search con la ricerca vettoriale
Creare un'applicazione React e configurare Tailwind CSS
Hosting di componenti WebAssembly in un'applicazione Blazor static
Miglioramenti agli screen reader e al contrasto in Angular
Usare le variabili per personalizzare gli stili CSS
Usare il colore CSS per migliorare lo stile della pagina
Criptare la comunicazione con mTLS in Azure Container Apps
Utilizzare i primary constructor in C#
Usare lo spread operator con i collection initializer in C#