<List />

実例

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>}
/>

Prop一覧

名前 型 / デフォルト値 概要
modifier string Specify modifier name to specify custom styles. (翻訳中) Optional.
dataSource string
[]
Source of the list data. Should be an array. (翻訳中) Optional.
renderRow function
() => null

Function to specify the rendering function for every element in in the dataSource.

(翻訳中)
Optional.
renderHeader function
() => null
Function to specify the rendering function for the header (翻訳中) Optional.
renderFooter function
() => null
Function to specify the rendering function for the footer (翻訳中) Optional.

プリセットのmodifier

Name 概要
inset 親要素の画面いっぱいに広がらないリストを表示します。
noborder リストの上下のボーダーが無いリストを表示します。

議論

お困りですか?

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

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

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