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
Utilizzare la libreria Benchmark.NET per misurare le performance
Definire stili a livello di libreria in Angular
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Eseguire attività con Azure Container Jobs
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Copiare automaticamente le secret tra più repository di GitHub
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Miglioramenti nell'accessibilità con Angular CDK
Le novità di Angular: i miglioramenti alla CLI
Utilizzare Tailwind CSS all'interno di React: primi componenti
I più letti di oggi
- Elencare gli utenti di un dominio NT con ADSI
- Creare un messaggio di posta in diversi formati con ASP.NET 2.0
- Utilizzare SQL e #linq per eseguire una query con #entityframework Core https://aspit.co/bfv di @sm15455 #efcore1
- Utilizzare il metodo reduce in #javascript https://aspit.co/ccc di @morwalpiz
- Disponibile il codice sorgente di ASP.NET MVC
- rilasciati nuovi template per la #aspnet web pages. funzionano anche con #webmatrix: http://u.aspitalia.com/lu