<ListItem />

実例

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>

Prop一覧

名前 型 / デフォルト値 概要
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.
lockOnDrag bool Prevent vertical scrolling when the user drags horizontally. (翻訳中) Optional.

プリセットのmodifier

Name 概要
tappable タップやクリックした時に効果が表示されるようになります。
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. (翻訳中)

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。