React Reference > ListItem Component

<ListItem />

Component that represents each item in the list. Must be put inside the List component. The list item is composed of four parts that are represented with the left, center, right and expandable-content classes. These classes can be used to ensure that the content of the list items is properly aligned.

Usage 

<ListItem>
  <div className="left">Left</div>
  <div className="center">Center</div>
  <div className="right">Right</div>
  <div className="expandable-content">Expandable content</div>
</ListItem>

Props

[improve this]
Name Type Description
modifier string The appearance of the list item. Optional.
tappable bool Specifies whether the list item is tappable. Optional.
tapBackgroundColor string Changes the background color when tapped. For this to work, the attribute “tappable” needs to be set. The default color is “#d9d9d9”. It will display as a ripple effect on Android. Optional.
keepTapBackgroundColor bool Prevent from clearing the background color on "touchmove", "touchcancel", "touchend", "touchleave", "mouseup", and "mouseout". For this to work, the attribute “tappable” needs to be set. Optional.
lockOnDrag bool Prevent vertical scrolling when the user drags horizontally. Optional.
expandable bool Specifies whether list item can be expanded to reveal hidden content. Expanded content must be defined in div.expandable-content. Optional.
expanded bool For expandable list items, specifies whether item is expanded Optional.
onExpand func This function will be called when the expandable list item expands or contracts. Optional.
animation string The animation used when showing and hiding the expandable content. Can be either “default” or “none”. Optional.

Preset Modifiers

[improve this]
Name Description
tappable Make the list item change appearance when it’s tapped. On iOS it is better to use the “tappable” and “tap-background-color” attribute for better behavior when scrolling.
chevron Display a chevron at the right end of the list item and make it change appearance when tapped.
longdivider Displays a long horizontal divider between items.
nodivider Removes the divider between list items.
material Display a Material Design list item.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.