React Reference > List Component

<List />

使い方 

<List
    dataSource={['Row 1', 'Row 2']}
    renderHeader={this.renderHeader}
    renderRow={(row, idx) => (
      <ListItem modifier={idx === this.state.data.length - 1 ? 'longdivider' : null}>
      {row}
  <Button modifier="quiet" onClick={this.remove.bind(this, idx)}>Remove</Button>
  </ListItem>
  )}
  renderFooter={this.renderFooter}
  />

Prop一覧

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

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

（翻訳中） Optional.
renderHeader func
() => null 		Function to specify the rendering function for the header （翻訳中） Optional.
renderFooter func
() => 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に記載をお願いいたします。

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