menu

集合允许你将列表对象进行分组。

基本集合

  • 白菜
  • 青菜
  • 萝卜
  • 土豆

    <ul class="collection">
      <li class="collection-item">白菜</li>
      <li class="collection-item">青菜</li>
      <li class="collection-item">萝卜</li>
      <li class="collection-item">土豆</li>
    </ul>
            

标题

  • 蔬菜

  • 白菜
  • 青菜
  • 萝卜
  • 土豆

      <ul class="collection with-header">
        <li class="collection-header"><h4>蔬菜</h4></li>
        <li class="collection-item">白菜</li>
        <li class="collection-item">青菜</li>
        <li class="collection-item">萝卜</li>
        <li class="collection-item">土豆</li>
      </ul>
            

次要内容


      <ul class="collection with-header">
        <li class="collection-header"><h4>蔬菜</h4></li>
        <li class="collection-item"><div>白菜<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
        <li class="collection-item"><div>青菜<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
        <li class="collection-item"><div>萝卜<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
        <li class="collection-item"><div>土豆<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
      </ul>
            

头像内容

  • 标题

    第一行
    第二行

    grade
  • folder 标题

    第一行
    第二行

    grade
  • insert_chart 标题

    第一行
    第二行

    grade
  • play_arrow 标题

    第一行
    第二行

    grade

  <ul class="collection">
    <li class="collection-item avatar">
      <img src="images/yuna.jpg" alt="" class="circle">
      <span class="title">标题</span>
      <p>第一行 <br>
         第二行
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
      <i class="material-icons circle">folder</i>
      <span class="title">标题</span>
      <p>第一行 <br>
         第二行
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
      <i class="material-icons circle green">insert_chart</i>
      <span class="title">标题</span>
      <p>第一行 <br>
         第二行
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
      <i class="material-icons circle red">play_arrow</i>
      <span class="title">标题</span>
      <p>第一行 <br>
         第二行
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
  </ul>
            

触摸删除

你可以增加dismissable类开启滑动删除。这个只能用于触摸设备。


      <ul class="collection">
        <li class="collection-item dismissable"><div>白菜<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
        <li class="collection-item dismissable"><div>青菜<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
        <li class="collection-item dismissable"><div>萝卜<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
        <li class="collection-item dismissable"><div>土豆<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
      </ul>