列表控制

<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">&#xe0b7;</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">&#xe0b7;</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">&#xe0b7;</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">&#xe1ba;</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">&#xe1a7;</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">&#xe1af;</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">&#xe88a;</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">&#xe871;</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">&#xe7fb;</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">&#xe313;</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">&#xe335;</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">&#xe313;</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">&#xe913;</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">&#xe313;</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">&#xe8cc;</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>