可以通知你有新的或未读邮件或通知。 添加new类来改变徽章的背景颜色。

集合

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

下拉列表中的徽章

• 一1
• 二1
• 三

  <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-trigger" href="#!" data-target="dropdown2">下拉列表<i class="material-icons right">arrow_drop_down</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>

折叠组件中的徽章

• filter_drama第一4

  有志者事竟成。

• place第二1

  有志者事竟成。

<ul class="collapsible">
  <li>
    <div class="collapsible-header">
      <i class="material-icons">filter_drama</i>
      第一
      <span class="new badge">4</span></div>
    <div class="collapsible-body"><p>有志者事竟成。</p></div>
  </li>
  <li>
    <div class="collapsible-header">
      <i class="material-icons">place</i>
      第二
      <span class="badge">1</span></div>
    <div class="collapsible-body"><p>有志者事竟成。</p></div>
  </li>
</ul>

选项

你可以用多种方式自定义标题。