menu

可以通知你有新的或未读邮件或通知。 添加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>
            

折叠组件中的徽章

  • 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>

选项

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

自定义标题

你可以使用 data-badge-caption属性设置徽章的标题。


  <span class="new badge" data-badge-caption="自定义标题">4</span>
  <span class="badge" data-badge-caption="自定义标题">4</span>
            
颜色

你可以使用颜色类来设置徽章的背景颜色。


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