List Index

List Index

List Index for Fast Alphabetical Scrolling

A list index is the letter strip of a contacts app. Place a .list-index inside the .page, next to .page-content, and point it at a list whose groups start with list-group-title rows. /authors/ groups by surname initial with group(books, (b) => surname(b)[0]):

The list index and grouped list in src/pages/authors.f7HTMLLive

<div class="list-index list-index-init" data-list-el=".authors" data-label="true"></div>
<div class="page-content">
  <div class="list contacts-list authors">
    ${groups.map(([letter, list]) => $h`
      <div class="list-group">
        <ul>
          <li class="list-group-title">${letter}</li>

list-index-init creates the index at page init from data- attributes; the defaults are indexes: 'auto' (letters from the group titles), scrollList: true and label: false, and data-label="true" shows a bubble under your finger:

The authors list and its index, in iOS (pressing "S") and Material

The strip is built once, so call app.listIndex.get(el).update() after re-rendering the groups.

MENU