14.0.0 • Published 5 months ago

@material/list v14.0.0

Weekly downloads
67,372
License
MIT
Repository
github
Last release
5 months ago

Lists

MDC List provides styles which implement Material Design Lists - "A single continuous column of tessellated subdivisions of equal width." Both single-line and two-line lists are supported (with three-line lists planned). MDC Lists are designed to be accessible and RTL aware.

Design & API Documentation

Installation

npm install @material/list

Usage

HTML Structure

Single-Line List

A basic list consists simply of the list itself, and list items taking up one line.

List items (rows) can contain primary and secondary actions. Lists items can contain 1 supporting graphic tile and/or 1 metadata tile that are positioned at the start and end of the list item, respectively.

<ul class="mdc-list">
  <li class="mdc-list-item">Single-line item</li>
  <li class="mdc-list-item">Single-line item</li>
  <li class="mdc-list-item">Single-line item</li>
</ul>

Two-Line List

While in theory you can add any number of "lines" to a list item, you can use the mdc-list--two-line combined with some extra markup around the text to style a list in the two-line list style as defined by the spec (see "Two-line lists").

<ul class="mdc-list mdc-list--two-line">
  <li class="mdc-list-item">
    <span class="mdc-list-item__text">
      First-line text
      <span class="mdc-list-item__secondary-text">
        Second-line text
      </span>
    </span>
  </li>
  <li class="mdc-list-item">
    <span class="mdc-list-item__text">
      First-line text
      <span class="mdc-list-item__secondary-text">
        Second-line text
      </span>
    </span>
  </li>
  <li class="mdc-list-item">
    <span class="mdc-list-item__text">
      First-line text
      <span class="mdc-list-item__secondary-text">
        Second-line text
      </span>
    </span>
  </li>
</ul>

List Groups

Multiple related lists can be grouped together using the mdc-list-group class on a containing element.

<div class="mdc-list-group">
  <h3 class="mdc-list-group__subheader">List 1</h3>
  <ul class="mdc-list">
    <li class="mdc-list-item">line item</li>
    <li class="mdc-list-item">line item</li>
    <li class="mdc-list-item">line item</li>
  </ul>

  <h3 class="mdc-list-group__subheader">List 2</h3>
  <ul class="mdc-list">
    <li class="mdc-list-item">line item</li>
    <li class="mdc-list-item">line item</li>
    <li class="mdc-list-item">line item</li>
  </ul>
</div>

List Dividers

MDC List contains an mdc-list-divider class which can be used as full-width or inset subdivisions either within lists themselves, or standalone between related groups of content.

<ul class="mdc-list">
  <li class="mdc-list-item">Item 1 - Division 1</li>
  <li class="mdc-list-item">Item 2 - Division 1</li>
  <li role="separator" class="mdc-list-divider"></li>
  <li class="mdc-list-item">Item 1 - Division 2</li>
  <li class="mdc-list-item">Item 2 - Division 2</li>
</ul>

NOTE: the role="separator" attribute on the list divider. It is important to include this so that assistive technology can be made aware that this is a presentational element and is not meant to be included as an item in a list. Note that separator is indeed a valid role for li elements.

OR

<ul class="mdc-list">
  <li class="mdc-list-item">Item 1 - List 1</li>
  <li class="mdc-list-item">Item 2 - List 1</li>
</ul>
<hr class="mdc-list-divider">
<ul class="mdc-list">
  <li class="mdc-list-item">Item 1 - List 2</li>
  <li class="mdc-list-item">Item 2 - List 2</li>
</ul>

CSS Classes

CSS ClassDescription
mdc-listMandatory, for the list element
mdc-list--non-interactiveOptional, disables interactivity affordances
mdc-list--denseOptional, styles the density of the list, making it appear more compact
mdc-list--avatar-listOptional, configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger
mdc-list--two-lineOptional, modifier to style list with two lines (primary and secondary lines)
mdc-list-itemMandatory, for the list item element
mdc-list-item__textOptional, primary text for the row (displayed as middle column of the list item)
mdc-list-item__secondary-textOptional, secondary text for the list item. Displayed below the primary text. Should be the child of mdc-list-item__text
mdc-list-item--selectedOptional, styles the row in an selected* state
mdc-list-item--activatedOptional, styles the row in an activated* state
mdc-list-item__graphicOptional, the first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image.
mdc-list-item__metaOptional, the last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image.
mdc-list-groupOptional, wrapper around two or more mdc-list elements to be grouped together
mdc-list-group__subheaderOptional, heading text displayed above each list in a group
mdc-list-dividerOptional, for list divider element
mdc-list-divider--paddedOptional, leaves gaps on each side of divider to match padding of list-item__meta
mdc-list-divider--insetOptional, increases the leading margin of the divider so that it does not intersect the avatar column

NOTE: mdc-list-divider class can be used between list items (example 1) OR between two lists (example 2)

NOTE: the difference between selected and activated states:

  • Selected state should be implemented on the .list-item when it is likely to change soon. Eg., selecting one or more photos to share in Google Photos.
  • Multiple items can be selected at the same time when using the selected state
  • Activated state is similar to selected state, however should only be implemented once within a specific list.
  • Activated state is more permanent than selected state, and will NOT change soon relative to the lifetime of the page.

Sass Mixins

MixinDescription
mdc-list-item-primary-text-ink-color($color)Sets the ink color of the primary text of the list item
mdc-list-item-secondary-text-ink-color($color)Sets the ink color of the secondary text of the list item
mdc-list-item-graphic-fill-color($color)Sets background ink color of the graphic element within list item
mdc-list-item-graphic-ink-color($color)Sets ink color of the graphic element within list item
mdc-list-item-meta-ink-color($color)Sets ink color of the meta element within list item
mdc-list-divider-color($color)Sets divider ink color
mdc-list-group-subheader-ink-color($color)Sets ink color of subheader text within list group
@material/drawer@material/data-table@material/menu@material/select@material/mwc-list@material/mwc-selectplaytwo-core-cms-sections@zentek/accordion@zentek/drawerpwa-test-hpwa-test1pwa-test2sot-incubatormdwrapper@beezydev/listmrcwmaterial-components-web@everything-registry/sub-chunk-584react-mdcdemo-stencil-track-liststencil-todo-liststencil-track-listst-materialeolia-sharedreact-material-web-componentsember-cli-mdc-listember-material-componentsbw-material@betazuul/drawer@betazuul/listclosure-react-drawerclosure-react-list@companick/react-drawercomponents-library-v1preact-material-componentspreact-material-components-mgr@bitchin/react-material-webaurelia-material-uiaurelia-mdc-ui@arterial/list@aurelia2-mdc-web/drawer@aurelia2-mdc-web/list@aurelia-mdc-web/drawer@aurelia-material-components/list@aurelia-mdc-web/list@authentic/mwc-list@detachhead/smui-list@dev.mohe/mwc-list@dev.mohe/mwc-select@angular/material-experimental@angular/materialsvelte-arcadiatest-rsmdc@batchforce/core@defense-unicorns/unicorn-ui@emuanalytics/flow-rdf@preact-material-components/list@plonquo/ember-material-components@pmwcs/list@react-mdc/list@react.material/list@rmwc/list@robertkern/vue-material@virtualpatterns/porto@xdam/ember-partials@whatoplay/react-drawer@whatoplay/react-list@smui/list@types/material__listsvmdvegatrovue-material-design-componentsgesdisc-componentsuui-componentsjsonresume-theme-material-design@inovex.de/elementsmaple-material-vue@infinitebrahmanuniverse/nolb-_mate@material-design/svelte@materialr/list@materials-elements/core@materials-elements/site@materials-ui/core@materials-ui/site@material/react-list@material/react-drawer@mhamrah/svelte-material-ui@mcwv/list@mdcext/multiselect@mdc-stencil/listmaterial-toolboxmaterial-imba@hieunv/react-mdc@ied/taskmdc-react-gumball@leanup/material-core@gmvdev/materials@hegdemahesh/moonraft-ui-element-sidebar@lcap-ui/list@morioh/material
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

3.2.0

5 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.1.0-alpha.0

5 years ago

3.0.0

5 years ago

3.0.0-alpha.1

5 years ago

3.0.0-alpha.0

5 years ago

2.3.0

5 years ago

2.1.1

5 years ago

2.0.0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.44.1

5 years ago

0.44.0

5 years ago

0.43.0

5 years ago

0.42.0

5 years ago

0.41.0

5 years ago

0.40.1

6 years ago

0.40.0

6 years ago

0.39.3

6 years ago

0.39.2

6 years ago

0.39.1

6 years ago

0.39.0

6 years ago

0.39.0-0

6 years ago

0.38.1

6 years ago

0.38.0

6 years ago

0.37.1

6 years ago

0.37.0

6 years ago

0.36.0

6 years ago

0.36.0-0

6 years ago

0.35.0

6 years ago

0.34.1

6 years ago

0.34.0

6 years ago

0.33.0

6 years ago

0.32.0

6 years ago

0.31.0

6 years ago

0.30.0

6 years ago

0.29.0

6 years ago

0.28.0

6 years ago

0.27.0

6 years ago

0.26.0

6 years ago

0.25.0

6 years ago

0.24.0

6 years ago

0.23.0

7 years ago

0.2.20

7 years ago

0.2.19

7 years ago

0.2.18

7 years ago

0.2.17

7 years ago

0.2.16

7 years ago

0.2.15

7 years ago

0.2.14

7 years ago

0.2.13

7 years ago

0.2.12

7 years ago

0.2.11

7 years ago

0.2.10

7 years ago

0.2.9

7 years ago

0.2.8

7 years ago

0.2.7

7 years ago

0.2.6

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.0

7 years ago