リスト要素に使用するヘッダー用コンポーネント。ons-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>
名前 | 型 / デフォルト値 | 概要 |
---|---|---|
modifier | String | ヘッダーの表現を指定します。 Optional. |
Name | 概要 |
---|---|
material | Display a Material Design list header. (翻訳中) |
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。