列表控制

<div class="mdui-list">

  <label class="mdui-list-item mdui-ripple">
    <div class="mdui-checkbox">
      <input type="checkbox" checked/>
      <i class="mdui-checkbox-icon"></i>
    </div>
    <div class="mdui-list-item-content">Line item selected</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat</i>
  </label>

  <label class="mdui-list-item mdui-ripple">
    <div class="mdui-checkbox">
      <input type="checkbox"/>
      <i class="mdui-checkbox-icon"></i>
    </div>
    <div class="mdui-list-item-content">Line item unselected</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat</i>
  </label>

  <label class="mdui-list-item mdui-ripple">
    <div class="mdui-checkbox">
      <input type="checkbox" checked/>
      <i class="mdui-checkbox-icon"></i>
    </div>
    <div class="mdui-list-item-content">Line item selected</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat</i>
  </label>

</div>

Line item selected

Line item unselected

Line item selected

<div class="mdui-list">

  <label class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar1.jpg"/></div>
    <div class="mdui-list-item-content">Line item selected</div>
    <div class="mdui-checkbox">
      <input type="checkbox" checked/>
      <i class="mdui-checkbox-icon"></i>
    </div>
  </label>

  <label class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar2.jpg"/></div>
    <div class="mdui-list-item-content">Line item unselected</div>
    <div class="mdui-checkbox">
      <input type="checkbox"/>
      <i class="mdui-checkbox-icon"></i>
    </div>
  </label>

  <label class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar3.jpg"/></div>
    <div class="mdui-list-item-content">Line item selected</div>
    <div class="mdui-checkbox">
      <input type="checkbox" checked/>
      <i class="mdui-checkbox-icon"></i>
    </div>
  </label>

</div>

<ul class="mdui-list">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">network_wifi</i>
    <div class="mdui-list-item-content">Wi-Fi</div>
    <label class="mdui-switch">
      <input type="checkbox" checked/>
      <i class="mdui-switch-icon"></i>
    </label>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">bluetooth</i>
    <div class="mdui-list-item-content">Bluetooth</div>
    <label class="mdui-switch">
      <input type="checkbox"/>
      <i class="mdui-switch-icon"></i>
    </label>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">data_usage</i>
    <div class="mdui-list-item-content">Data usage</div>
  </li>

</ul>

<ul class="mdui-list" mdui-collapse="{accordion: true}">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
    <div class="mdui-list-item-content">Home</div>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
    <div class="mdui-list-item-content">Dashboard</div>
  </li>

  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Pages</li>
      <li class="mdui-list-item mdui-ripple">Landing Pages</li>
      <li class="mdui-list-item mdui-ripple">Exit Pages</li>
    </ul>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">shopping_cart</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>