Component that represents each item in a list. 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.
<ons-list-item>
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
<div class="expandable-content">Expandable content</div>
</ons-list-item>
There are also a number of classes (prefixed with list-item__*) that help when putting things like icons and thumbnails into the list items.
To render a list the List component is used. The items in the list are rendered using the renderRow prop and the data for the row is specified using the dataSource prop.
The list items are created using the ListItem component.
<List
dataSource={this.state.data}
renderRow={(row) => <ListItem>{row}</ListItem>}
/>
There are also two props called renderHeader and renderFooter that can be used to render an element at the top or bottom of the list. The ListHeader component can be used to render a header.
<List
dataSource={this.state.data}
renderRow={this.renderRow}
renderHeader={() => <ListHeader>Stuff</ListHeader>}
/>
You can make list items expandable by adding the expandable prop. When you click on an expandable list item, it grows to reveal hidden content. The content that is shown when the element is expanded is defined in div.expandable-content.
<ListItem expandable>
Top content
<div className='expandable-content'>Expandable content</div>
</ListItem>
| Name | Type | Description |
|---|---|---|
| modifier | String | The appearance of the list item. Optional. |
| lock-on-drag | Boolean | 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. |
| keep-tap-background-color | Boolean |
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.
|
| expandable | Boolean |
Makes the element able to be expanded to reveal extra content. For this to work, the expandable content must be defined in div.expandable-content.
Optional.
|
| expanded | Boolean | For expandable list items, specifies whether the expandable content is expanded or not. Optional. |
| animation |
String
default |
The animation used when showing and hiding the expandable content. Can be either "default" or "none".
Optional.
|
| Name | Description |
|---|---|
| lockOnDrag | Prevent vertical scrolling when the user drags horizontally. |
| tappable |
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.
|
| tapBackgroundColor | 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. |
| keepTapBackgroundColor |
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.
|
| expandable |
Makes the element able to be expanded to reveal extra content. For this to work, the expandable content must be defined in div.expandable-content.
|
| expanded | For expandable list items, specifies whether the expandable content is expanded or not. |
| animation |
The animation used when showing and hiding the expandable content. Can be either "default" or "none".
|
| 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. |
| Signature | Description |
|---|---|
| showExpansion() | Show the expandable content if the element is expandable. |
| hideExpansion() | Hide the expandable content if the element expandable. |
| clearTapBackgroundColor() |
Clear backgroundColor changed on tap or click. This method is helpful when keep-tap-background-color is true.
|
Show the expandable content if the element is expandable.
Hide the expandable content if the element expandable.
Clear backgroundColor changed on tap or click. This method is helpful when keep-tap-background-color is true.
| Name | Description |
|---|---|
| expand | For expandable list items, fires when the list item is expanded or contracted. |
For expandable list items, fires when the list item is expanded or contracted.
| Name | Type | Description |
|---|
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.