Component that represents each item in a list. The list item is composed of three parts that are represented with the left, center and right classes. These classes can be used to ensure that the content of the list items is properly aligned.

    <div class="left">Left</div>
    <div class="center">Center</div>
    <div class="right">Right</div>

There is also a number of classes (prefixed with list-item__*) that help when putting things like icons and thumbnails into the list items.



ons-list element renders a list. Please refer to ons-list element Reference for more details.

Tutorial contents will be added soon.

See also


Name Type Default Value Description
modifier String The appearance of the list item. Optional.
lock-on-drag String Prevent vertical scrolling when the user drags horizontally. Optional.
tappable Boolean Makes the element react to taps. prevent-tap attribute can be added to child elements like buttons or inputs to prevent this effect. ons-* elements are ignored by default. Optional.
tap-background-color Color 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.

Preset Modifiers

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 via Gitter 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.