third_party/ot-br-posix/repo/third_party/mdl/repo/src/list/README.md

   1 ## Introduction
   2 Lists present multiple line items vertically as a single continuous element. Refer the [Material Design
   3 Spec](https://www.google.com/design/spec/components/lists.html) to know more about the content options.
   4
   5 ### To include the MDL **list** component:
   6
   7 ## Create a List with basic items.
   8
   9 &nbsp;1. Code a `<ul>` element with the class `mdl-list`; this is the "outer" container, intended to hold all of the list's content.
  10 ```html
  11 <ul class='mdl-list'>
  12 </ul>
  13 ```
  14 &nbsp;2. Code as many `<li>` elements as required with the class `mdl-list__item`; this is intended to hold all of the **item's** content.
  15 ```html
  16 <ul class='mdl-list'>
  17   <li class="mdl-list__item"></li>
  18   <li class="mdl-list__item"></li>
  19   <li class="mdl-list__item"></li>
  20 </ul>
  21 ```
  22
  23 &nbsp;3. Add your content as the children of the `<li>`, with the appropriate content type modification class for example .
  24 ```html
  25 <ul class='mdl-list'>
  26   <li class="mdl-list__item">
  27     <span class="mdl-list__item-primary-content"></span>
  28   </li>
  29   <li class="mdl-list__item">
  30     <span class="mdl-list__item-primary-content"></span>
  31   </li>
  32   <li class="mdl-list__item">
  33     <span class="mdl-list__item-primary-content"></span>
  34   </li>
  35 </ul>
  36 ```
  37
  38 ## Configuration options
  39
  40 The MDL CSS classes apply various predefined visual enhancements to the list. The table below lists the available classes and their effects.
  41
  42 | MDL Class        | Effect           | Remark  |
  43 | ------------- |:-------------:| -----:|
  44 | .mdl-list | Defines list as an MDL component| - |
  45 | .mdl-list__item | Defines the List's Items | required |
  46 | .mdl-list__item--two-line | Defines the List's Items as Two Line | Optional Two Line List Variant |
  47 | .mdl-list__item--three-line | Defines the List's Items  as a Three Line | Optional Three Line List Variant |
  48 | .mdl-list__item-primary-content | Defines the primary content sub-division |-|
  49 | .mdl-list__item-avatar | Defines the avatar sub-division |-|
  50 | .mdl-list__item-icon | Defines the icon sub-division |-|
  51 | .mdl-list__item-secondary-content | Defines the secondary content sub-division | requires `.mdl-list__item--two-line` or `.mdl-list__item--three-line` |
  52 | .mdl-list__item-secondary-info | Defines the information sub-division |requires `.mdl-list__item--two-line` or `.mdl-list__item--three-line` |
  53 | .mdl-list__item-secondary-action | Defines the Action sub-division | requires `.mdl-list__item--two-line` or `.mdl-list__item--three-line` |
  54 | .mdl-list__item-text-body | Defines the Text Body sub-division | requires `.mdl-list__item--three-line` |