third_party/ot-br-posix/repo/third_party/mdl/repo/src/list/snippets/list-control.html

   1 <!-- List with avatar and controls -->
   2 <style>
   3 .demo-list-control {
   4   width: 300px;
   5 }
   6
   7 .demo-list-radio {
   8   display: inline;
   9 }
  10 </style>
  11
  12 <ul class="demo-list-control mdl-list">
  13   <li class="mdl-list__item">
  14     <span class="mdl-list__item-primary-content">
  15       <i class="material-icons  mdl-list__item-avatar">person</i>
  16       Bryan Cranston
  17     </span>
  18     <span class="mdl-list__item-secondary-action">
  19       <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-1">
  20         <input type="checkbox" id="list-checkbox-1" class="mdl-checkbox__input" checked />
  21       </label>
  22     </span>
  23   </li>
  24   <li class="mdl-list__item">
  25     <span class="mdl-list__item-primary-content">
  26       <i class="material-icons  mdl-list__item-avatar">person</i>
  27       Aaron Paul
  28     </span>
  29     <span class="mdl-list__item-secondary-action">
  30       <label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="list-option-1">
  31         <input type="radio" id="list-option-1" class="mdl-radio__button" name="options" value="1" checked />
  32       </label>
  33     </span>
  34   </li>
  35   <li class="mdl-list__item">
  36     <span class="mdl-list__item-primary-content">
  37       <i class="material-icons  mdl-list__item-avatar">person</i>
  38       Bob Odenkirk
  39     </span>
  40     <span class="mdl-list__item-secondary-action">
  41       <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-1">
  42         <input type="checkbox" id="list-switch-1" class="mdl-switch__input" checked />
  43       </label>
  44     </span>
  45   </li>
  46 </ul>