SponsorsBecome a sponsor
- Get Started
- Events
- Router / Navigation
- Store
- Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Area Chart
- Autocomplete
- Badge
- Block / Content Block
- Breadcrumbs
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Color Picker
- Contacts List
- Data Table
- Dialog
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Segmented
- Sheet Modal
- Skeleton
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swipeout
- Swiper
- Tabs
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Treeview
- View / Router
- Virtual List
- Framework7 Icons
- Styling
- Dom7
- Touch Utilities
- Utilities
- Plugins API
- Lazy Modules
- Custom Build
List Index
List Index allows to access a particular section of the list view instantly without scrolling through each section.
List Index Layout
Single List Index layout is pretty simple:
<div class="page">
<div class="navbar">...</div>
<!-- List Index element, must be a direct child of page -->
<div class="list-index"></div>
<!-- Scrollable page content -->
<div class="page-content">...</div>
</div>
List Index App Methods
Let's look at related App methods to work with List Index:
app.listIndex.create(parameters)- create List Index instance
- parameters - object. Object with list index parameters
Method returns created List Index's instance
app.listIndex.destroy(el)- destroy List Index instance
- el - HTMLElement or string (with CSS Selector) or object. List Index element or List Index instance to destroy.
app.listIndex.get(el)- get List Index instance by HTML element
- el - HTMLElement or string (with CSS Selector). List Index element.
Method returns List Index's instance
List Index Parameters
Now let's look at list of available parameters we need to create List Index:
| Parameter | Type | Default | Description |
|---|---|---|---|
| el | HTMLElement string | List Index element. HTMLElement or string with CSS selector of list index element | |
| listEl | HTMLElement string | Related List View element. HTMLElement or string with CSS selector of List View element | |
| indexes | array string | auto | Array with indexes. If not passed then it will automatically generate it based on list-group-title elements inside of passed List View element in listEl parameter |
| scrollList | boolean | true | Will automatically scroll related List View to the selected index |
| label | boolean | false | Enables label bubble with selected index when you swipe over list index |
| iosItemHeight | number | 14 | Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For iOS theme |
| mdItemHeight | number | 14 | Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For MD theme |
| on | object | Object with events handlers. For example: |
List Index Methods & Properties
So to create List Index we have to call:
var listIndex = app.listIndex.create({ /* parameters */ })After that we have its initialized instance (like listIndex variable in example above) with useful methods and properties:
| Properties | |
|---|---|
| listIndex.app | Link to global app instance |
| listIndex.el | List index HTML element |
| listIndex.$el | Dom7 instance with list index HTML element |
| listIndex.ul | Dynamically created inner <ul> HTML element |
| listIndex.$ul | Dom7 instance with dynamically created inner <ul> HTML element |
| listIndex.listEl | Related List HTML element, passed in listEl parameter |
| listIndex.$listEl | Dom7 instance with related List HTML element, passed in listEl parameter |
| listIndex.indexes | Array with calculated indexes |
| listIndex.params | List index parameters |
| Methods | |
| listIndex.update() | Recalculates indexes, sizes and rerenders list index |
| listIndex.scrollListToIndex(itemContent) | Scrolls related list to specified index content |
| listIndex.destroy() | Destroys list index instance |
| listIndex.on(event, handler) | Add event handler |
| listIndex.once(event, handler) | Add event handler that will be removed after it was fired |
| listIndex.off(event, handler) | Remove event handler |
| listIndex.off(event) | Remove all handlers for specified event |
| listIndex.emit(event, ...args) | Fire event on instance |
List Index Events
List Index will fire the following DOM events on list index element and events on app and list index instance:
DOM Events
| Event | Target | Description |
|---|---|---|
| listindex:select | List Index Element<div class="list-index"> | Event will be triggered on index select rather by click or swiping |
| listindex:click | List Index Element<div class="list-index"> | Event will be triggered on index click |
| listindex:beforedestroy | List Index Element<div class="list-index"> | Event will be triggered right before List Index instance will be destroyed |
App and List Index Instance Events
List Index instance emits events on both self instance and app instance. App instance events has same names prefixed with listIndex.
| Event | Arguments | Target | Description |
|---|---|---|---|
| select | (listIndex, itemContent) | listIndex | Event will be triggered on index select rather by click or swiping. As an argument event handler receives list index instance and selected index item content |
| listIndexSelect | (listIndex, itemContent) | app | |
| click | (listIndex, itemContent) | listIndex | Event will be triggered on index click. As an argument event handler receives list index instance and clicked index item content |
| listIndexClick | (listIndex, itemContent) | app | |
| beforeDestroy | (listIndex) | listIndex | Event will be triggered right before List Index instance will be destroyed. As an argument event handler receives list index instance |
| listIndexBeforeDestroy | (listIndex) | app |
List Index Auto Initialization
If you don't need to use List Index API and your List Index is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional list-index-init class:
<!-- Add list-index-init class -->
<div class="list-index list-index-init"></div>
In this case if you need to access created List Index instance you can use the app.listIndex.get app method:
var listIndex = app.listIndex.get('.list-index');
var indexes = listIndex.indexes;
// do something with indexesWhen using auto init you may need to pass additional parameters. you can set all available parameters via data- attributes on list index element:
<div class="page">
...
<!-- parameters set via data- attributes -->
<div class="list-index"
data-list-el=".contacts-list"
data-label="true"
data-indexes="auto"
></div>
<div class="page-content">
<div class="list contacts-list">
...
</div>
</div>
</div>
CSS Variables
Below is the list of related CSS variables (CSS custom properties).
Note that commented variables are not specified by default and their values is what they fallback to in this case.
:root {
--f7-list-index-width: 16px;
--f7-list-index-font-size: 11px;
--f7-list-index-font-weight: 600;
/* --f7-list-index-text-color: var(--f7-theme-color); */
--f7-list-index-item-height: 14px;
--f7-list-index-label-font-weight: 500;
}
.ios {
--f7-list-index-label-text-color: #fff;
/* --f7-list-index-label-bg-color: var(--f7-theme-color); */
--f7-list-index-label-size: 44px;
--f7-list-index-label-font-size: 17px;
--f7-list-index-skip-dot-size: 6px;
}
.md {
--f7-list-index-label-size: 56px;
--f7-list-index-label-font-size: 20px;
--f7-list-index-skip-dot-size: 4px;
}
.md,
.md .dark,
.md [class*='color-'] {
--f7-list-index-label-bg-color: var(--f7-md-primary);
--f7-list-index-label-text-color: var(--f7-md-on-primary);
}
Examples
list-index.html
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">List Index</div>
</div>
</div>
<div class="list-index"></div>
<div class="page-content">
<div class="list contacts-list list-strong-ios list-dividers-ios">
<div class="list-group">
<ul>
<li class="list-group-title">A</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Aaron</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Adam</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Aiden</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Albert</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Alex</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Alexander</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Alfie</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Archie</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Arthur</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Austin</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">B</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Benjamin</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Blake</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Bobby</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">C</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Caleb</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Callum</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Cameron</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Charles</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Charlie</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Connor</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">D</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Daniel</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">David</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Dexter</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Dylan</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">E</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Edward</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Elijah</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Elliot</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Elliott</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Ethan</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Evan</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">F</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Felix</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Finlay</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Finley</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Frankie</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Freddie</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Frederick</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">G</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Gabriel</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">George</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">H</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Harley</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Harrison</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Harry</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Harvey</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Henry</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Hugo</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">I</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Ibrahim</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Isaac</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">J</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Jack</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Jacob</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Jake</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">James</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Jamie</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Jayden</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Jenson</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Joseph</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Joshua</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Jude</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">K</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Kai</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Kian</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">L</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Leo</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Leon</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Lewis</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Liam</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Logan</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Louie</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Louis</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Luca</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Lucas</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Luke</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">M</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Mason</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Matthew</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Max</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Michael</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Mohammad</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Mohammed</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Muhammad</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">N</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Nathan</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Noah</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">O</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Oliver</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Ollie</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Oscar</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Owen</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">R</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Reuben</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Riley</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Robert</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Ronnie</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Rory</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Ryan</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">S</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Samuel</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Sebastian</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Seth</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Sonny</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Stanley</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">T</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Teddy</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Theo</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Theodore</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Thomas</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Toby</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Tommy</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Tyler</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">W</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">William</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">Z</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Zachary</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default (props, { $f7, $el, $onMounted, $onBeforeUnmount }) => {
let listIndex;
$onMounted(() => {
// Create list index instance
listIndex = $f7.listIndex.create({
// List el where to look indexes and scroll for
listEl: $el.value.find('.list'),
// ".list-index" element
el: $el.value.find('.list-index'),
// Generate indexes automatically based on ".list-group-title"
indexes: 'auto',
// Scroll list on indexes click and touchmove
scrollList: true,
// Enable bubble label when swiping over indexes
label: true,
});
})
$onBeforeUnmount(() => {
if (listIndex) {
listIndex.destroy();
}
})
return $render;
}
</script>