Materialize Badges : Badges are basically used to show the notifications or unread messages. Materialize provides inbuilt classes to show Badges. Here in this tutorial we are going to explain how you can use badges in Materialize framework. You can also use our online demo edit and run the code online.
Materialize Badges Example
Let us go step by step to understand the badges-
Add Badges To Collections
Class badge is used to create badge and class new badge is used to add background to the badges. Here is an example to add badges in collections simply as below –
Materialize Add Badges In Collections Example:
<div class="collection">
<a href="#!" class="collection-item"><span class="badge">2</span>Dummy</a>
<a href="#!" class="collection-item">Dummy</a>
<a href="#!" class="collection-item"><span class="new badge">5</span>Dummy</a>
</div>
|
If you run the above example it will produce output something like this –
Add Badges To Dropdown
You can add badges to dropdown menu simply as below –
If you run the above example it will produce output something like this –
Add Badges To Navbar
Materialize Add badges to Navbar:
<nav>
<div class="nav-wrapper">
Tutorialsplane.com
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Profile</li>
<li>Messages<span class="new badge">4</span></li>
<li>Logout</li>
</ul>
</div>
</nav>
|
If you run the above example it will produce output something like this –
Add Badges To Collapsibles
You can add badges to collapsibles simply as below –
Materialize Add badges to Collapsibles:
|
If you run the above example it will produce output something like this –
Learn More
Let us have some More example and demo about the Angular Material Chips.
Custom Captions
Materialize Add badges to Custom Captions:
<span class="new badge" data-badge-caption="My caption">5</span>
<span class="badge" data-badge-caption="My caption">6</span>
|
Add Custom Color
If you want to add color to the badges you can add simply as below –
Materialize Add Color to badges Example:
<span class="new badge red">14</span>
<span class="new badge yellow">10</span>
|
The above example will give output something like this –