🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

List Index Svelte Component

List Index Svelte component represents List Index component.

List Index Components

There are following components included:

List Index Properties

<ListIndex> properties
initbooleantrueInitializes List Index
Related List View element. HTMLElement or string with CSS selector of List View element
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

List Index Events

<ListIndex> events
listIndexSelect(itemContent, itemIndex)Event will be triggered on index select rather by click or swiping. As an argument event handler receives selected index item content

List Index Methods

<ListIndex> methods
.update()Recalculates indexes, sizes and rerenders list index
.scrollListToIndex(itemContent)Scrolls related list to specified index content


  import { Page, Navbar, List, ListGroup, ListItem, ListIndex } from 'framework7-svelte';

  function onIndexSelect(itemContent, itemIndex) {
    console.log(itemContent, itemIndex);

  <Navbar title="List Index" />
  <List contactsList ul={false} strongIos dividersIos>
      <ListItem title="A" groupTitle />
      <ListItem title="Aaron" />
      <ListItem title="Adam" />
      <ListItem title="Aiden" />
      <ListItem title="Albert" />
      <ListItem title="Alex" />
      <ListItem title="Alexander" />
      <ListItem title="Alfie" />
      <ListItem title="Archie" />
      <ListItem title="Arthur" />
      <ListItem title="Austin" />
      <ListItem title="B" groupTitle />
      <ListItem title="Benjamin" />
      <ListItem title="Blake" />
      <ListItem title="Bobby" />
      <ListItem title="C" groupTitle />
      <ListItem title="Caleb" />
      <ListItem title="Callum" />
      <ListItem title="Cameron" />
      <ListItem title="Charles" />
      <ListItem title="Charlie" />
      <ListItem title="Connor" />
      <ListItem title="D" groupTitle />
      <ListItem title="Daniel" />
      <ListItem title="David" />
      <ListItem title="Dexter" />
      <ListItem title="Dylan" />
      <ListItem title="E" groupTitle />
      <ListItem title="Edward" />
      <ListItem title="Elijah" />
      <ListItem title="Elliot" />
      <ListItem title="Elliott" />
      <ListItem title="Ethan" />
      <ListItem title="Evan" />
      <ListItem title="F" groupTitle />
      <ListItem title="Felix" />
      <ListItem title="Finlay" />
      <ListItem title="Finley" />
      <ListItem title="Frankie" />
      <ListItem title="Freddie" />
      <ListItem title="Frederick" />
      <ListItem title="G" groupTitle />
      <ListItem title="Gabriel" />
      <ListItem title="George" />
      <ListItem title="H" groupTitle />
      <ListItem title="Harley" />
      <ListItem title="Harrison" />
      <ListItem title="Harry" />
      <ListItem title="Harvey" />
      <ListItem title="Henry" />
      <ListItem title="Hugo" />
      <ListItem title="I" groupTitle />
      <ListItem title="Ibrahim" />
      <ListItem title="Isaac" />
      <ListItem title="J" groupTitle />
      <ListItem title="Jack" />
      <ListItem title="Jacob" />
      <ListItem title="Jake" />
      <ListItem title="James" />
      <ListItem title="Jamie" />
      <ListItem title="Jayden" />
      <ListItem title="Jenson" />
      <ListItem title="Joseph" />
      <ListItem title="Joshua" />
      <ListItem title="Jude" />
      <ListItem title="K" groupTitle />
      <ListItem title="Kai" />
      <ListItem title="Kian" />
      <ListItem title="L" groupTitle />
      <ListItem title="Leo" />
      <ListItem title="Leon" />
      <ListItem title="Lewis" />
      <ListItem title="Liam" />
      <ListItem title="Logan" />
      <ListItem title="Louie" />
      <ListItem title="Louis" />
      <ListItem title="Luca" />
      <ListItem title="Lucas" />
      <ListItem title="Luke" />
      <ListItem title="M" groupTitle />
      <ListItem title="Mason" />
      <ListItem title="Matthew" />
      <ListItem title="Max" />
      <ListItem title="Michael" />
      <ListItem title="Mohammad" />
      <ListItem title="Mohammed" />
      <ListItem title="Muhammad" />
      <ListItem title="N" groupTitle />
      <ListItem title="Nathan" />
      <ListItem title="Noah" />
      <ListItem title="O" groupTitle />
      <ListItem title="Oliver" />
      <ListItem title="Ollie" />
      <ListItem title="Oscar" />
      <ListItem title="Owen" />
      <ListItem title="R" groupTitle />
      <ListItem title="Reuben" />
      <ListItem title="Riley" />
      <ListItem title="Robert" />
      <ListItem title="Ronnie" />
      <ListItem title="Rory" />
      <ListItem title="Ryan" />
      <ListItem title="S" groupTitle />
      <ListItem title="Samuel" />
      <ListItem title="Sebastian" />
      <ListItem title="Seth" />
      <ListItem title="Sonny" />
      <ListItem title="Stanley" />
      <ListItem title="T" groupTitle />
      <ListItem title="Teddy" />
      <ListItem title="Theo" />
      <ListItem title="Theodore" />
      <ListItem title="Thomas" />
      <ListItem title="Toby" />
      <ListItem title="Tommy" />
      <ListItem title="Tyler" />
      <ListItem title="W" groupTitle />
      <ListItem title="William" />
      <ListItem title="Z" groupTitle />
      <ListItem title="Zachary" />