Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
@material/list
Advanced tools
@material/list is a package from the Material Design Components (MDC) library that provides a set of components and utilities for creating lists with Material Design styling. It allows developers to create various types of lists, such as single-line, two-line, and three-line lists, with support for interactive elements like checkboxes, radio buttons, and icons.
Single-line List
This feature allows you to create a single-line list with Material Design styling. The `singleSelection` property enables single item selection within the list.
import { MDCList } from '@material/list';
const list = new MDCList(document.querySelector('.mdc-list'));
list.singleSelection = true;
Two-line List
This feature allows you to create a two-line list where each list item can have a primary and secondary text. The `wrapFocus` property ensures that focus wraps from the last item back to the first item when navigating with the keyboard.
import { MDCList } from '@material/list';
const list = new MDCList(document.querySelector('.mdc-list'));
list.wrapFocus = true;
List with Checkboxes
This feature allows you to create a list where each item includes a checkbox. The code initializes the list and maps over each list item to initialize the checkboxes.
import { MDCList } from '@material/list';
const list = new MDCList(document.querySelector('.mdc-list'));
list.listElements.map((listItemEl) => new MDCCheckbox(listItemEl.querySelector('.mdc-checkbox')));
List with Icons
This feature allows you to create a list where each item includes an icon button. The code initializes the list and maps over each list item to initialize the icon buttons.
import { MDCList } from '@material/list';
const list = new MDCList(document.querySelector('.mdc-list'));
list.listElements.map((listItemEl) => new MDCIconButtonToggle(listItemEl.querySelector('.mdc-icon-button')));
react-list is a versatile library for rendering lists in React applications. It supports infinite scrolling, variable heights, and other advanced features. Compared to @material/list, react-list is more focused on performance and flexibility in rendering large lists, but it does not provide built-in Material Design styling.
react-virtualized is a library for efficiently rendering large lists and tabular data in React. It offers features like lazy loading, infinite scrolling, and dynamic row heights. While it excels in performance for large datasets, it does not include Material Design components like @material/list.
react-window is a lightweight library for rendering large lists and grids in React. It is similar to react-virtualized but with a smaller footprint and simpler API. It focuses on performance and efficiency, but like react-virtualized, it does not provide Material Design styling out of the box.
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.
npm install --save @material/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>
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>
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>
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 Class | Description |
---|---|
mdc-list | Mandatory, for the list element |
mdc-list--non-interactive | Optional, disables interactivity affordances |
mdc-list--dense | Optional, styles the density of the list, making it appear more compact |
mdc-list--avatar-list | Optional, 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-line | Optional, modifier to style list with two lines (primary and secondary lines) |
mdc-list-item | Mandatory, for the list item element |
mdc-list-item__text | Optional, primary text for the row (displayed as middle column of the list item) |
mdc-list-item__secondary-text | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of mdc-list-item__text |
mdc-list-item--selected | Optional, styles the row in an selected* state |
mdc-list-item--activated | Optional, styles the row in an activated* state |
mdc-list-item__graphic | Optional, the first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image. |
mdc-list-item__meta | Optional, the last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image. |
mdc-list-group | Optional, wrapper around two or more mdc-list elements to be grouped together |
mdc-list-group__subheader | Optional, heading text displayed above each list in a group |
mdc-list-divider | Optional, for list divider element |
mdc-list-divider--padded | Optional, leaves gaps on each side of divider to match padding of list-item__meta |
mdc-list-divider--inset | Optional, 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:
.list-item
when it is likely to change soon. Eg., selecting one or more photos to share in Google Photos.Mixin | Description |
---|---|
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 |
FAQs
The Material Components for the web list component
The npm package @material/list receives a total of 699,221 weekly downloads. As such, @material/list popularity was classified as popular.
We found that @material/list demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.