Lists
Lists are continuous, vertical indexes of text or images.
Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.
Simple List
The last item of the previous demo shows how you can render a link:
function ListItemLink(props) {
return <ListItem button component="a" {...props} />;
}
//...
<ListItemLink href="#simple-list">
<ListItemText primary="Spam" />
</ListItemLink>
You can find a demo with React Router following this section of the documentation.
Nested List
Interactive
Below is an interactive demo that lets you explore the visual results of the different settings:
Text only
- Single-line item
- Single-line item
- Single-line item
Icon with text
- Single-line item
- Single-line item
- Single-line item
Avatar with text
- Single-line item
- Single-line item
- Single-line item
Avatar with text and icon
- Single-line item
- Single-line item
- Single-line item
Align list items
You should change the list item alignment when displaying 3 lines or more, set the alignItems="flex-start"
property.
- Brunch this weekend?
Ali Connors — I'll be in your neighborhood doing errands this…
- Summer BBQ
to Scott, Alex, Jennifer — Wish I could come, but I'm out of town this…
- Oui Oui
Sandra Adams — Do you have Paris recommendations? Have you ever…
List Controls
Checkbox
A checkbox can either be a primary action or a secondary action.
The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.
The checkbox is the secondary action for the list item and a separate target.
Pinned Subheader List
Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader.
This feature is relying on the CSS sticky positioning.
Unfortunately it's not implemented by all the browsers we are supporting. We default to disableSticky
when not supported.
- I'm sticky 0
- Item 0
- Item 1
- Item 2
- I'm sticky 1
- Item 0
- Item 1
- Item 2
- I'm sticky 2
- Item 0
- Item 1
- Item 2
- I'm sticky 3
- Item 0
- Item 1
- Item 2
- I'm sticky 4
- Item 0
- Item 1
- Item 2
Virtualized List
In the following example, we demonstrate how to use react-window with the List
component.
It renders 200 rows and can easily handle more.
Virtualization helps with performance issues.
We encourage the use of react-window when possible. If this library doesn't cover your use case, you should consider using react-virtualized, then alternatives like react-virtuoso.