14.0.0 • Published 1 year ago

@material/list v14.0.0

Weekly downloads
67,372
License
MIT
Repository
github
Last release
1 year 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/mwc-list@material/mwc-selectplaytwo-core-cms-sections@zentek/accordion@zentek/drawerpwa-test-hpwa-test1pwa-test2sot-incubatormdwrapper@beezydev/listmrcw@everything-registry/sub-chunk-584svmdtest-rsmdcsvelte-arcadiauui-components@companick/react-drawer@dev.mohe/mwc-select@dev.mohe/mwc-list@defense-unicorns/unicorn-ui@detachhead/smui-list@cpangular/ng-material-themejsonresume-theme-material-designst-materialstencil-todo-liststencil-track-list@arterial/list@aurelia-mdc-web/list@authentic/mwc-list@aurelia2-mdc-web/list@aurelia-mdc-web/drawer@aurelia-material-components/list@aurelia2-mdc-web/drawer@batchforce/core@bitchin/react-material-web@betazuul/drawer@betazuul/listvue-material-design-componentsvegatro@hegdemahesh/moonraft-ui-element-sidebar@ied/task@element-public/react-list@gmvdev/materials@infinitebrahmanuniverse/nolb-_mate@inovex.de/elements@leanup/material-core@lcap-ui/list@mhamrah/svelte-material-ui@material/menu@material/select@material-design/svelte@material/react-drawer@material/react-list@material/drawer@material/data-table@netdata/dashboard@emuanalytics/flow-rdf@mcwv/list@materials-elements/core@materials-elements/site@materials-ui/core@materials-ui/site@materialr/list@mdcext/multiselect@mdc-stencil/list@hieunv/react-mdc@morioh/material@react-mdc/list@plonquo/ember-material-components@preact-material-components/list@react.material/list@rmwc/list@pmwcs/list@pitaya-components/accordion@pitaya-components/list@o-rango/orango-material-design@robertkern/vue-materialreact-mdcreact-material-web-componentspreact-material-componentspreact-material-components-mgrmaple-material-vuematerial-imbamaterial-components-webmaterial-toolboxmdc-react-gumball@whatoplay/react-drawer@whatoplay/react-list@xdam/ember-partials@types/material__list@virtualpatterns/portocomponents-library-v1closure-react-drawerclosure-react-listdemo-stencil-track-listaurelia-mdc-uiaurelia-material-uibw-materialember-cli-mdc-list
14.0.0

3 years ago

13.0.0

4 years ago

12.0.0

4 years ago

11.0.0

4 years ago

10.0.0

4 years ago

9.0.0

5 years ago

8.0.0

5 years ago

7.0.0

5 years ago

6.0.0

5 years ago

5.1.0

5 years ago

5.0.0

5 years ago

4.0.0

6 years ago

3.2.0

6 years ago

4.0.0-canary.1

6 years ago

4.0.0-canary.0

6 years ago

4.0.0-alpha.0

6 years ago

3.1.0

6 years ago

3.1.0-alpha.0

6 years ago

3.0.0

6 years ago

3.0.0-alpha.1

6 years ago

3.0.0-alpha.0

6 years ago

2.3.0

6 years ago

2.1.1

6 years ago

2.0.0

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

1.0.0-1

6 years ago

1.0.0-0

6 years ago

0.44.1

6 years ago

0.44.0

6 years ago

0.43.0

6 years ago

0.42.0

7 years ago

0.41.0

7 years ago

0.40.1

7 years ago

0.40.0

7 years ago

0.39.3

7 years ago

0.39.2

7 years ago

0.39.1

7 years ago

0.39.0

7 years ago

0.39.0-0

7 years ago

0.38.1

7 years ago

0.38.0

7 years ago

0.37.1

7 years ago

0.37.0

7 years ago

0.36.0

7 years ago

0.36.0-0

7 years ago

0.35.0

7 years ago

0.34.1

7 years ago

0.34.0

7 years ago

0.33.0

7 years ago

0.32.0

7 years ago

0.31.0

7 years ago

0.30.0

7 years ago

0.29.0

7 years ago

0.28.0

7 years ago

0.27.0

8 years ago

0.26.0

8 years ago

0.25.0

8 years ago

0.24.0

8 years ago

0.23.0

8 years ago

0.2.20

8 years ago

0.2.19

8 years ago

0.2.18

8 years ago

0.2.17

8 years ago

0.2.16

8 years ago

0.2.15

8 years ago

0.2.14

8 years ago

0.2.13

8 years ago

0.2.12

8 years ago

0.2.11

8 years ago

0.2.10

8 years ago

0.2.9

8 years ago

0.2.8

8 years ago

0.2.7

8 years ago

0.2.6

8 years ago

0.2.5

8 years ago

0.2.4

8 years ago

0.2.3

8 years ago

0.2.2

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.0

9 years ago