Spesso capita di dover mostrare un testo con accanto un numero. Un tipico caso in cui questa funzionalità torna utile quando si vuole mostrare all'utente ilnumero di messaggi ricevuti, o di notifiche pending, o di email in coda o altro ancora. Questi indicatori vengono definiti Badge e sono molto diffusi nel web moderno.
Bootstrap fornisce già degli stili CSS per creare badge quindi possiamo crearne uno utilizzando il seguente codice HTML.
<button class="btn btn-primary" type="button"> Inbox <span class="badge">4</span> </button>
Il testo contenuto nel bottone è quello che indica il soggetto del badge (la inbox in questo caso), mentre il numero contenuto nello span con classe badge rappresenta il numero a cui dare risalto (il numero di email non lette in questo caso). Gestendo il click sul pulsante possiamo anche navigare alla pagina della inbox.
Questa tecnica può essere usata non solo per i pulsanti, ma anche per i link come mostrato nel seguente codice HTML:
<a href="inbox">Inbox <span class="badge">42</span></a>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Miglioramenti nelle performance di Angular 16
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Utilizzare Tailwind CSS all'interno di React: installazione
Eseguire attività basate su eventi con Azure Container Jobs
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Creare form tipizzati con Angular
Code scanning e advanced security con Azure DevOps
Utilizzare la session affinity con Azure Container Apps
Hosting di componenti WebAssembly in un'applicazione Blazor static
Effettuare il pull di git LFS in un workflow di GitHub
Creare un'applicazione React e configurare Tailwind CSS
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework