Component that represents each item in the list. Must be put inside the
The list item is composed of three parts that are represented with the
right classes. These classes can be used to ensure that the content of the list items is properly aligned.
<ons-list-item> <div class="left">Left</div> <div class="center">Center</div> <div class="right">Right</div> </ons-list-item>
There is also a number of classes (prefixed with
list-item__*) that help when putting things like icons and thumbnails into the list items.
|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. 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.|
|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. The chevron is not displayed in Material Design.|
|longdivider||Displays a long horizontal divider between items.|
|nodivider||Removes the divider between list items.|
|material||Display a Material Design list item.|
For bug reports and feature requests use our GitHub Issues page.