The most common usage of the
@react-md/list package will be to create single
line lists that are interactable. This can be accomplished using the
ListItem components exported by this package. The
ListItem component will
create a keyboard focusable and clickable element that gains the different
ListItem can also be modified to have icons, avatars, or media placed with
the main content.
Note: Lists do not normally have elevation and it was just added for the examples on this page to add some more contrast to the backgrounds. Lists are by default flat against whichever surface they are placed upon.
ListItem also supports adding a second line of supplementary text using
secondaryText prop. The secondary text will be placed below the primary
text within the item and gain the secondary text color to show some contrast.
All the normal left and right addons can be used as well. Just like the primary
text within a list item, the secondary text will be truncated once it reaches
the overflow point.
List items can also be rendered as three lines of text: one line for primary
text and two lines for secondary text. This can be enabled by enabling the
threeLines prop which will modify the height and update the height for the
This is a simple demo that will allow you to set some different props on the
ListItem and see how the layout changes.
You can also create non-interactable lists by using the
component even though this method is not recommended as using the default
<ol> elements along with
<li> might be a bit easier due to some styling
SimpleListItem is set to
display: flex to help
with positioning all the parts, the default list styles are invalid since they
will only appear with
display: list-item. You can add the styles back by
applying margin and a
&::before element that contains the middle dot or the
current index when using an ordered list. This example shows a way to handle
both use cases.