<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に記載をお願いいたします。

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