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:
List Vue component represents Framework7's List View component.
<f7-list>
<f7-list-item title="Item 1"></f7-list-item>
<f7-list-item title="Item 2"></f7-list-item>
</f7-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>
<f7-list>
<f7-list-group>
<f7-list-item title="Group 1" group-title></f7-list-item>
<f7-list-item title="Item 1"></f7-list-item>
<f7-list-item title="Item 2"></f7-list-item>
</f7-list-group>
<f7-list-group>
<f7-list-item title="Group 2" group-title></f7-list-item>
<f7-list-item title="Item 1"></f7-list-item>
<f7-list-item title="Item 2"></f7-list-item>
</f7-list-group>
</f7-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><f7-list media-list>
<f7-list-item title="Item 1" subtitle="Subtitle 1" text="Item 1 Text"></f7-list-item>
<f7-list-item title="Item 1" subtitle="Subtitle 2" text="Item 2 Text"></f7-list-item>
</f7-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><f7-list>
<f7-list-item title="Item 1"></f7-list-item>
<f7-list-item title="Item 2"></f7-list-item>
<f7-list-label>List Label</f7-list-label>
</f7-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>| Prop | Type | Default | Description |
|---|---|---|---|
| <f7-list> properties | |||
| inset | boolean | Makes list block inset | |
| tablet-inset | boolean | Makes block inset on tablets, but not on phones | |
| media-list | 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> | |
| store-data | boolean | Enables form storage for the current form | |
| no-hairlines | boolean | Removes outer hairlines. | |
| no-hairlines-between | 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 | |
| <f7-list> Virtual List specific Properties | |||
| virtual | boolean | Enables Virtual List | |
| virtual-init | boolean | true | Initializes Virtual List |
| virtual-items | array/object | Array with list items | |
| virtual-height | number/function | If number - item height in px. If function then function should return item height | |
| virtual-rows-before | 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 | |
| virtual-rows-after | 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 | |
| virtual-cols | number | 1 | Number of items per row. Doesn't compatible when using Virtual List with dynamic height |
| virtual-cache | 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 |
| virtual-filtered-only | boolean | false | Option to show filtered items only set by `filter()` method |
| virtual-search-by-item | 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 |
|
| virtual-search-all | 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 | |
| virtual-render-item | function(index, item) | This optional function allows to use custom function to render item HTML. It could be used instead of template parameter | |
| virtual-empty-template | string | Specify list item template when empty data is passed | |
| Event | Description |
|---|---|
| sortable:open | Event will be triggered when sortable mode is enabled |
| sortable:close | Event will be triggered when sortable mode is disabled |
| sortable:sort | 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 |
| tab:show | Event will be triggered when List Block-Tab becomes visible/active |
| tab:hide | Event will be triggered when List Block-Tab becomes invisible/inactive |
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.