List Index - 图1

List Index Vue Component

List Index Vue component represents List Index component.

List Index Components

There are following components included:

  • f7-list-index

List Index Properties

PropTypeDefaultDescription
<f7-list-index> properties
initbooleantrueInitializes List Index
list-elobject
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 item-divider and list-group-title elements inside of passed List View element in listEl parameter
scroll-listbooleantrueWill automatically scroll related List View to the selected index
labelbooleanfalseEnables label bubble with selected index when you swipe over list index
ios-item-heightnumber14Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For iOS theme
md-item-heightnumber14Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For MD theme
aurora-item-heightnumber14Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For Aurora theme

List Index Events

EventArgumentsDescription
<f7-list-index> events
listindex:select(itemContent)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

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

Examples

  1. <template>
  2.   <f7-page>
  3.     <f7-navbar title="List Index"></f7-navbar>
  5.     <f7-list-index
  6.       indexes="auto"
  7.       list-el=".list.contacts-list"
  8.       :scroll-list="true"
  9.       :label="true"
  10.       @listindex:select="onIndexSelect"
  11.     ></f7-list-index>
  13.     <f7-list contacts-list>
  14.       <f7-list-group>
  15.         <f7-list-item title="A" group-title></f7-list-item>
  16.         <f7-list-item title="Aaron"></f7-list-item>
  17.         <f7-list-item title="Adam"></f7-list-item>
  18.         <f7-list-item title="Aiden"></f7-list-item>
  19.         <f7-list-item title="Albert"></f7-list-item>
  20.         <f7-list-item title="Alex"></f7-list-item>
  21.         <f7-list-item title="Alexander"></f7-list-item>
  22.         <f7-list-item title="Alfie"></f7-list-item>
  23.         <f7-list-item title="Archie"></f7-list-item>
  24.         <f7-list-item title="Arthur"></f7-list-item>
  25.         <f7-list-item title="Austin"></f7-list-item>
  26.       </f7-list-group>
  27.       <f7-list-group>
  28.         <f7-list-item title="B" group-title></f7-list-item>
  29.         <f7-list-item title="Benjamin"></f7-list-item>
  30.         <f7-list-item title="Blake"></f7-list-item>
  31.         <f7-list-item title="Bobby"></f7-list-item>
  32.       </f7-list-group>
  33.       <f7-list-group>
  34.         <f7-list-item title="C" group-title></f7-list-item>
  35.         <f7-list-item title="Caleb"></f7-list-item>
  36.         <f7-list-item title="Callum"></f7-list-item>
  37.         <f7-list-item title="Cameron"></f7-list-item>
  38.         <f7-list-item title="Charles"></f7-list-item>
  39.         <f7-list-item title="Charlie"></f7-list-item>
  40.         <f7-list-item title="Connor"></f7-list-item>
  41.       </f7-list-group>
  42.       <f7-list-group>
  43.         <f7-list-item title="D" group-title></f7-list-item>
  44.         <f7-list-item title="Daniel"></f7-list-item>
  45.         <f7-list-item title="David"></f7-list-item>
  46.         <f7-list-item title="Dexter"></f7-list-item>
  47.         <f7-list-item title="Dylan"></f7-list-item>
  48.       </f7-list-group>
  49.       <f7-list-group>
  50.         <f7-list-item title="E" group-title></f7-list-item>
  51.         <f7-list-item title="Edward"></f7-list-item>
  52.         <f7-list-item title="Elijah"></f7-list-item>
  53.         <f7-list-item title="Elliot"></f7-list-item>
  54.         <f7-list-item title="Elliott"></f7-list-item>
  55.         <f7-list-item title="Ethan"></f7-list-item>
  56.         <f7-list-item title="Evan"></f7-list-item>
  57.       </f7-list-group>
  58.       <f7-list-group>
  59.         <f7-list-item title="F" group-title></f7-list-item>
  60.         <f7-list-item title="Felix"></f7-list-item>
  61.         <f7-list-item title="Finlay"></f7-list-item>
  62.         <f7-list-item title="Finley"></f7-list-item>
  63.         <f7-list-item title="Frankie"></f7-list-item>
  64.         <f7-list-item title="Freddie"></f7-list-item>
  65.         <f7-list-item title="Frederick"></f7-list-item>
  66.       </f7-list-group>
  67.       <f7-list-group>
  68.         <f7-list-item title="G" group-title></f7-list-item>
  69.         <f7-list-item title="Gabriel"></f7-list-item>
  70.         <f7-list-item title="George"></f7-list-item>
  71.       </f7-list-group>
  72.       <f7-list-group>
  73.         <f7-list-item title="H" group-title></f7-list-item>
  74.         <f7-list-item title="Harley"></f7-list-item>
  75.         <f7-list-item title="Harrison"></f7-list-item>
  76.         <f7-list-item title="Harry"></f7-list-item>
  77.         <f7-list-item title="Harvey"></f7-list-item>
  78.         <f7-list-item title="Henry"></f7-list-item>
  79.         <f7-list-item title="Hugo"></f7-list-item>
  80.       </f7-list-group>
  81.       <f7-list-group>
  82.         <f7-list-item title="I" group-title></f7-list-item>
  83.         <f7-list-item title="Ibrahim"></f7-list-item>
  84.         <f7-list-item title="Isaac"></f7-list-item>
  85.       </f7-list-group>
  86.       <f7-list-group>
  87.         <f7-list-item title="J" group-title></f7-list-item>
  88.         <f7-list-item title="Jack"></f7-list-item>
  89.         <f7-list-item title="Jacob"></f7-list-item>
  90.         <f7-list-item title="Jake"></f7-list-item>
  91.         <f7-list-item title="James"></f7-list-item>
  92.         <f7-list-item title="Jamie"></f7-list-item>
  93.         <f7-list-item title="Jayden"></f7-list-item>
  94.         <f7-list-item title="Jenson"></f7-list-item>
  95.         <f7-list-item title="Joseph"></f7-list-item>
  96.         <f7-list-item title="Joshua"></f7-list-item>
  97.         <f7-list-item title="Jude"></f7-list-item>
  98.       </f7-list-group>
  99.       <f7-list-group>
  100.         <f7-list-item title="K" group-title></f7-list-item>
  101.         <f7-list-item title="Kai"></f7-list-item>
  102.         <f7-list-item title="Kian"></f7-list-item>
  103.       </f7-list-group>
  104.       <f7-list-group>
  105.         <f7-list-item title="L" group-title></f7-list-item>
  106.         <f7-list-item title="Leo"></f7-list-item>
  107.         <f7-list-item title="Leon"></f7-list-item>
  108.         <f7-list-item title="Lewis"></f7-list-item>
  109.         <f7-list-item title="Liam"></f7-list-item>
  110.         <f7-list-item title="Logan"></f7-list-item>
  111.         <f7-list-item title="Louie"></f7-list-item>
  112.         <f7-list-item title="Louis"></f7-list-item>
  113.         <f7-list-item title="Luca"></f7-list-item>
  114.         <f7-list-item title="Lucas"></f7-list-item>
  115.         <f7-list-item title="Luke"></f7-list-item>
  116.       </f7-list-group>
  117.       <f7-list-group>
  118.         <f7-list-item title="M" group-title></f7-list-item>
  119.         <f7-list-item title="Mason"></f7-list-item>
  120.         <f7-list-item title="Matthew"></f7-list-item>
  121.         <f7-list-item title="Max"></f7-list-item>
  122.         <f7-list-item title="Michael"></f7-list-item>
  123.         <f7-list-item title="Mohammad"></f7-list-item>
  124.         <f7-list-item title="Mohammed"></f7-list-item>
  125.         <f7-list-item title="Muhammad"></f7-list-item>
  126.       </f7-list-group>
  127.       <f7-list-group>
  128.         <f7-list-item title="N" group-title></f7-list-item>
  129.         <f7-list-item title="Nathan"></f7-list-item>
  130.         <f7-list-item title="Noah"></f7-list-item>
  131.       </f7-list-group>
  132.       <f7-list-group>
  133.         <f7-list-item title="O" group-title></f7-list-item>
  134.         <f7-list-item title="Oliver"></f7-list-item>
  135.         <f7-list-item title="Ollie"></f7-list-item>
  136.         <f7-list-item title="Oscar"></f7-list-item>
  137.         <f7-list-item title="Owen"></f7-list-item>
  138.       </f7-list-group>
  139.       <f7-list-group>
  140.         <f7-list-item title="R" group-title></f7-list-item>
  141.         <f7-list-item title="Reuben"></f7-list-item>
  142.         <f7-list-item title="Riley"></f7-list-item>
  143.         <f7-list-item title="Robert"></f7-list-item>
  144.         <f7-list-item title="Ronnie"></f7-list-item>
  145.         <f7-list-item title="Rory"></f7-list-item>
  146.         <f7-list-item title="Ryan"></f7-list-item>
  147.       </f7-list-group>
  148.       <f7-list-group>
  149.         <f7-list-item title="S" group-title></f7-list-item>
  150.         <f7-list-item title="Samuel"></f7-list-item>
  151.         <f7-list-item title="Sebastian"></f7-list-item>
  152.         <f7-list-item title="Seth"></f7-list-item>
  153.         <f7-list-item title="Sonny"></f7-list-item>
  154.         <f7-list-item title="Stanley"></f7-list-item>
  155.       </f7-list-group>
  156.       <f7-list-group>
  157.         <f7-list-item title="T" group-title></f7-list-item>
  158.         <f7-list-item title="Teddy"></f7-list-item>
  159.         <f7-list-item title="Theo"></f7-list-item>
  160.         <f7-list-item title="Theodore"></f7-list-item>
  161.         <f7-list-item title="Thomas"></f7-list-item>
  162.         <f7-list-item title="Toby"></f7-list-item>
  163.         <f7-list-item title="Tommy"></f7-list-item>
  164.         <f7-list-item title="Tyler"></f7-list-item>
  165.       </f7-list-group>
  166.       <f7-list-group>
  167.         <f7-list-item title="W" group-title></f7-list-item>
  168.         <f7-list-item title="William"></f7-list-item>
  169.       </f7-list-group>
  170.       <f7-list-group>
  171.         <f7-list-item title="Z" group-title></f7-list-item>
  172.         <f7-list-item title="Zachary"></f7-list-item>
  173.       </f7-list-group>
  174.     </f7-list>
  175.   </f7-page>
  176. </template>
  177. <script>
  178.   export default {
  179.     methods: {
  180.       onIndexSelect(itemContent) {
  181.         console.log(itemContent);
  182.       },
  183.     },
  184.   };
  185. </script>

← List Button

List Item →