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:

ParameterTypeDefaultDescription
elHTMLElement
string
List Index element. HTMLElement or string with CSS selector of list index element
listElHTMLElement
string
Related List View element. HTMLElement or string with CSS selector of List View element
indexesarray
string
autoArray 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
scrollListbooleantrueWill automatically scroll related List View to the selected index
labelbooleanfalseEnables label bubble with selected index when you swipe over list index
iosItemHeightnumber14Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For iOS theme
mdItemHeightnumber14Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For MD theme
onobject

Object with events handlers. For example:

var listIndex = app.listIndex.create({
  el: '.list-index',
  on: {
    select: function () {
      console.log('Index selected')
    },
  },
})

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.appLink to global app instance
listIndex.elList index HTML element
listIndex.$elDom7 instance with list index HTML element
listIndex.ulDynamically created inner <ul> HTML element
listIndex.$ulDom7 instance with dynamically created inner <ul> HTML element
listIndex.listElRelated List HTML element, passed in listEl parameter
listIndex.$listElDom7 instance with related List HTML element, passed in listEl parameter
listIndex.indexesArray with calculated indexes
listIndex.paramsList 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

EventTargetDescription
listindex:selectList Index Element<div class="list-index">Event will be triggered on index select rather by click or swiping
listindex:clickList Index Element<div class="list-index">Event will be triggered on index click
listindex:beforedestroyList 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.

EventArgumentsTargetDescription
select(listIndex, itemContent)listIndexEvent 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)listIndexEvent 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)listIndexEvent 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 indexes

When 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>