<ons-list />

Component to define a list, and the container for ons-list-item(s).

Tutorial

List

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>

See also

Name Type Description
modifier String The appearance of the list. Optional.
Name Description
inset Inset list that doesn’t cover the whole width of the parent.
noborder A list with no borders at the top and bottom.

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.