-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
List React Component
List views are versatile and powerful user interface compontents frequently found in iOS apps. A list view presents data in a scrollable list of multiple rows that may be divided into sections/groups.
List views have many purposes:
- To let users navigate through hierarchically structured data
- To present an indexed list of items
- To display detail information and controls in visually distinct groupings
- To present a selectable list of options
List React component represents Framework7's List View component.
Usage examples
Minimal Layout
<List>
<ListItem title="Item 1"></ListItem>
<ListItem title="Item 2"></ListItem>
</List>
Renders to:
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</li>
</ul>
</div>
With Groups
<List>
<ListGroup>
<ListItem title="Group 1" groupTitle></ListItem>
<ListItem title="Item 1"></ListItem>
<ListItem title="Item 2"></ListItem>
</ListGroup>
<ListGroup>
<ListItem title="Group 2" groupTitle></ListItem>
<ListItem title="Item 1"></ListItem>
<ListItem title="Item 2"></ListItem>
</ListGroup>
</List>
Renders to:
<div class="list-block">
<div class="list-block-group">
<ul>
<li class="list-group-title"><span>Group 1</span></li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</li>
</ul>
</div>
<div class="list-block-group">
<ul>
<li class="list-group-title"><span>Group 2</span></li>
...
</ul>
</div>
</div>
Media List
<List mediaList>
<ListItem title="Item 1" subtitle="Subtitle 1" text="Item 1 Text"></ListItem>
<ListItem title="Item 1" subtitle="Subtitle 2" text="Item 2 Text"></ListItem>
</List>
Renders to:
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Item 1</div>
</div>
<div class="item-subtitle">Subtitle 1</div>
<div class="item-text">Item 1 Text</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Item 1</div>
</div>
<div class="item-subtitle">Subtitle 1</div>
<div class="item-text">Item 1 Text</div>
</div>
</li>
</ul>
</div>
With Label
<List>
<ListItem title="Item 1"></ListItem>
<ListItem title="Item 2"></ListItem>
<ListLabel>List Label</ListLabel>
</List>
Renders to:
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</li>
</ul>
<div class="list-block-label">List Label</div>
</div>
Properties
Prop | Type | Default | Description |
---|---|---|---|
<List> properties | |||
inset | boolean | Makes list block inset | |
tabletInset | boolean | Makes block inset on tablets, but not on phones | |
mediaList | boolean | Enables Media List | |
grouped | boolean | Enable if you want to use list groups inside | |
sortable | boolean | Enables Sortable List | |
accordion | boolean | Enables Accordion List | |
contacts | boolean | Enables Contacts List by adding required addional classes for styling | |
form | boolean | Enables <form> tag on list block instead of <div> | |
storeData | boolean | Enables form storage for the current form | |
noHairlines | boolean | Removes outer hairlines. | |
noHairlinesBetween | boolean | Removes inner hairlines. | |
tab | boolean | Adds additional "tab" class when block should be used as a Tab | |
active | boolean | Adds additional "active" class when block used as a Tab and makes it active tab | |
<List> Virtual List specific Properties | |||
virtual | boolean | Enables Virtual List | |
virtualInit | boolean | true | Initializes Virtual List |
virtualItems | array/object | Array with list items | |
virtualHeight | number/function | If number - item height in px. If function then function should return item height | |
virtualRowsBefore | number | Amount of rows (items) to be rendered before current screen scroll position. By default it is equal to double amount of rows (items) that fit to screen | |
virtualRowsAfter | number | Amount of rows (items) to be rendered after current screen scroll position. By default it is equal to the amount of rows (items) that fit to screen | |
virtualCols | number | 1 | Number of items per row. Doesn't compatible when using Virtual List with dynamic height |
virtualCache | boolean | true | Disable or enable DOM cache for already rendered list items. In this case each item will be rendered only once and all futher manipulations will be with DOM element. It is useful if your list items have some user interaction elements (like form elements or swipe outs) or could be modified |
virtualFilteredOnly | boolean | false | Option to show filtered items only set by `filter()` method |
virtualSearchByItem | function(query, index, item) | Search function that will be used by Search Bar, it receives search query, item index and item itself. If item matches to search query you need to return true , otherwise this function should return false |
|
virtualSearchAll | function(query, items) | Search function that will be used by Search Bar, it receives search query and array with all items. You need to loop through items and return array with indexes of matched items | |
virtualRenderItem | function(index, item) | This optional function allows to use custom function to render item HTML. It could be used instead of template parameter | |
virtualEmptyTemplate | string | Specify list item template when empty data is passed |
Event Properties
Event | Description |
---|---|
onSortableOpen | Event will be triggered when sortable mode is enabled |
onSortableClose | Event will be triggered when sortable mode is disabled |
onSortableSort | Event will be triggered after user release currently sorting element in new position. event.detail will contain object with startIndex and newIndex properties with start/new index numbers of sorted list item |
onTabShow | Event will be triggered when List Block-Tab becomes visible/active |
onTabHide | Event will be triggered when List Block-Tab becomes invisible/inactive |
Access To Virtual List Initialized Instance
If you use automatic initalization to init the Virtual List (with virtual-init:true
prop) and need to use its Methods and Properties you can access its initialized instance by accessing .f7VirtualList
component's property.