Copybara bot | be50d49 | 2023-11-30 00:16:42 +0100 | [diff] [blame] | 1 | |
| 2 | |
| 3 | |
| 4 | <h2 id="introduction">Introduction</h2> |
| 5 | <p>Lists present multiple line items vertically as a single continuous element. Refer the <a href="https://www.google.com/design/spec/components/lists.html">Material Design |
| 6 | Spec</a> to know more about the content options.</p> |
| 7 | <h3 id="to-include-the-mdl-list-component-">To include the MDL <strong>list</strong> component:</h3> |
| 8 | <h2 id="create-a-list-with-basic-items-">Create a List with basic items.</h2> |
| 9 | <p> 1. Code a <code><ul></code> element with the class <code>mdl-list</code>; this is the "outer" container, intended to hold all of the list's content.</p> |
| 10 | <pre><code class="lang-html"><ul class='mdl-list'> |
| 11 | </ul> |
| 12 | </code></pre> |
| 13 | <p> 2. Code as many <code><li></code> elements as required with the class <code>mdl-list__item</code>; this is intended to hold all of the <strong>item's</strong> content.</p> |
| 14 | <pre><code class="lang-html"><ul class='mdl-list'> |
| 15 | <li class="mdl-list__item"></li> |
| 16 | <li class="mdl-list__item"></li> |
| 17 | <li class="mdl-list__item"></li> |
| 18 | </ul> |
| 19 | </code></pre> |
| 20 | <p> 3. Add your content as the children of the <code><li></code>, with the appropriate content type modification class for example .</p> |
| 21 | <pre><code class="lang-html"><ul class='mdl-list'> |
| 22 | <li class="mdl-list__item"> |
| 23 | <span class="mdl-list__item-primary-content"></span> |
| 24 | </li> |
| 25 | <li class="mdl-list__item"> |
| 26 | <span class="mdl-list__item-primary-content"></span> |
| 27 | </li> |
| 28 | <li class="mdl-list__item"> |
| 29 | <span class="mdl-list__item-primary-content"></span> |
| 30 | </li> |
| 31 | </ul> |
| 32 | </code></pre> |
| 33 | <h2 id="configuration-options">Configuration options</h2> |
| 34 | <p>The MDL CSS classes apply various predefined visual enhancements to the list. The table below lists the available classes and their effects.</p> |
| 35 | <table> |
| 36 | <thead> |
| 37 | <tr> |
| 38 | <th>MDL Class</th> |
| 39 | <th style="text-align:center">Effect</th> |
| 40 | <th style="text-align:right">Remark</th> |
| 41 | </tr> |
| 42 | </thead> |
| 43 | <tbody> |
| 44 | <tr> |
| 45 | <td>.mdl-list</td> |
| 46 | <td style="text-align:center">Defines list as an MDL component</td> |
| 47 | <td style="text-align:right">-</td> |
| 48 | </tr> |
| 49 | <tr> |
| 50 | <td>.mdl-list__item</td> |
| 51 | <td style="text-align:center">Defines the List's Items</td> |
| 52 | <td style="text-align:right">required</td> |
| 53 | </tr> |
| 54 | <tr> |
| 55 | <td>.mdl-list__item--two-line</td> |
| 56 | <td style="text-align:center">Defines the List's Items as Two Line</td> |
| 57 | <td style="text-align:right">Optional Two Line List Variant</td> |
| 58 | </tr> |
| 59 | <tr> |
| 60 | <td>.mdl-list__item--three-line</td> |
| 61 | <td style="text-align:center">Defines the List's Items as a Three Line</td> |
| 62 | <td style="text-align:right">Optional Three Line List Variant</td> |
| 63 | </tr> |
| 64 | <tr> |
| 65 | <td>.mdl-list__item-primary-content</td> |
| 66 | <td style="text-align:center">Defines the primary content sub-division</td> |
| 67 | <td style="text-align:right">-</td> |
| 68 | </tr> |
| 69 | <tr> |
| 70 | <td>.mdl-list__item-avatar</td> |
| 71 | <td style="text-align:center">Defines the avatar sub-division</td> |
| 72 | <td style="text-align:right">-</td> |
| 73 | </tr> |
| 74 | <tr> |
| 75 | <td>.mdl-list__item-icon</td> |
| 76 | <td style="text-align:center">Defines the icon sub-division</td> |
| 77 | <td style="text-align:right">-</td> |
| 78 | </tr> |
| 79 | <tr> |
| 80 | <td>.mdl-list__item-secondary-content</td> |
| 81 | <td style="text-align:center">Defines the secondary content sub-division</td> |
| 82 | <td style="text-align:right">requires <code>.mdl-list__item--two-line</code> or <code>.mdl-list__item--three-line</code></td> |
| 83 | </tr> |
| 84 | <tr> |
| 85 | <td>.mdl-list__item-secondary-info</td> |
| 86 | <td style="text-align:center">Defines the information sub-division</td> |
| 87 | <td style="text-align:right">requires <code>.mdl-list__item--two-line</code> or <code>.mdl-list__item--three-line</code></td> |
| 88 | </tr> |
| 89 | <tr> |
| 90 | <td>.mdl-list__item-secondary-action</td> |
| 91 | <td style="text-align:center">Defines the Action sub-division</td> |
| 92 | <td style="text-align:right">requires <code>.mdl-list__item--two-line</code> or <code>.mdl-list__item--three-line</code></td> |
| 93 | </tr> |
| 94 | <tr> |
| 95 | <td>.mdl-list__item-text-body</td> |
| 96 | <td style="text-align:center">Defines the Text Body sub-division</td> |
| 97 | <td style="text-align:right">requires <code>.mdl-list__item--three-line</code></td> |
| 98 | </tr> |
| 99 | </tbody> |
| 100 | </table> |
| 101 | |
| 102 | |