标记

标记可以提醒你有新的或者未读的消息或者通知。为标记添加“new”类给它一个背景。

collection

<div class="collection">
 <a href="#!" class="collection-item">Alan<span class="badge">1</span></a>
 <a href="#!" class="collection-item">Alan<span class="new badge">4</span></a>
 <a href="#!" class="collection-item">Alan</a>
 <a href="#!" class="collection-item">Alan<span class="badge">14</span></a> 
</div>

下拉菜单的标记

<ul id="dropdown2" class="dropdown-content">
 <li><a href="#!">one<span class="badge">1</span></a></li>
 <li><a href="#!">two<span class="new badge">1</span></a></li>
 <li><a href="#!">three</a></li> </ul> 
<a class="btn dropdown-button" href="#!" data-activates="dropdown2">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>

导航栏标记

<nav>
 <div class="nav-wrapper">
    <a href="" class="brand-logo">Logo</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
     <li><a href="">sass</a></li>
     <li><a href="">sass <span class="new badge">4</span></a></li>
     <li><a href="">sass</a></li>
    </ul>
 </div> 
</nav>

选项

你可以用很多种方法定做说明。

自定义说明

你可以精确地在标记中使用“data-badge-caption”的属性设置说明。

<span class="new badge" data-badge-caption="custom caption">4</span>
<span class="badge" data-badge-caption="custom caption">4</span>

颜色

你可以使用我们的颜色类来为标记设置背景色。

 <span class="new badge red">4</span>
 <span class="new badge blue">4</span>