List Vue Component

    List views are versatile and powerful user interface compontents frequently found in iOS apps. A list view presents data in a scrollable list of multiple rows that may be divided into sections/groups.

    List views have many purposes:

    • To let users navigate through hierarchically structured data
    • To present an indexed list of items
    • To display detail information and controls in visually distinct groupings
    • To present a selectable list of options

    There are following components included:

    • - main List View element
    • **f7-list-group** - list group element

    List Properties

    EventDescription
    <f7-list> events
    tab:showEvent will be triggered when List Block-Tab becomes visible/active
    tab:hideEvent will be triggered when List Block-Tab becomes invisible/inactive
    submitEvent will be triggered on list-form submit when list used as form (with enabled form prop)
    <f7-list> Sortable specific events
    sortable:enableEvent will be triggered when sortable mode is enabled
    sortable:disableEvent will be triggered when sortable mode is disabled
    sortable:sortEvent will be triggered after user release currently sorting element in new position. event.detail will contain object with from and to properties with start/new index numbers of sorted list item
    <f7-list> Virtual List specific events
    virtual:itembeforeinsertEvent will be triggered before item will be added to virtual document fragment
    virtual:itemsbeforeinsertEvent will be triggered after current DOM list will be removed and before new document will be inserted
    virtual:itemsafterinsertEvent will be triggered after new document fragment with items inserted
    virtual:beforeclearEvent will be triggered before current DOM list will be removed and replaced with new document fragment

    List Slots

    List Vue component (<f7-list>) has additional slots for custom elements:

    • **before-list** - element will be inserted in the beginning of list view and right before <ul> main list
    • **after-list** - element will be inserted in the end of list view and right after <ul> main list
    • **list** - element will be inserted inside of <ul> main list element

    Sortable List

    For Sortable List usage and examples check the documentation.

    For Accordion List usage and examples check the Accordion Vue Component documentation.

    Examples

    Simple List

    Simple List Links

    1. <f7-block-title>Simple Links List</f7-block-title>
    2. <f7-list>
    3.   <f7-list-item title="Link 1" link="#"></f7-list-item>
    4.   <f7-list-item title="Link 2" link="#"></f7-list-item>
    5.   <f7-list-item title="Link 3" link="#"></f7-list-item>
    6. </f7-list>

    Data list, with icons

    1. <f7-block-title>Data list, with icons</f7-block-title>
    2. <f7-list>
    3.   <f7-list-item title="Ivan Petrov" after="CEO">
    4.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    5.   </f7-list-item>
    6.   <f7-list-item title="John Doe" badge="5">
    7.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    8.   </f7-list-item>
    9.   <f7-list-item title="Jenna Smith">
    10.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    11.   </f7-list-item>
    12. </f7-list>

    Links

    1. <f7-block-title>Links</f7-block-title>
    2. <f7-list>
    3.   <f7-list-item link="#" title="Ivan Petrov" after="CEO">
    4.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    5.   </f7-list-item>
    6.   <f7-list-item link="#" title="John Doe" after="Cleaner">
    7.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    8.   </f7-list-item>
    9.   <f7-list-item link="#" title="Jenna Smith">
    10.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    11.   </f7-list-item>
    12. </f7-list>

    Links, Header, Footer

    Links, no icons

    1. <f7-block-title>Links, no icons</f7-block-title>
    2. <f7-list>
    3.   <f7-list-item link="#" title="Ivan Petrov"></f7-list-item>
    4.   <f7-list-item link="#" title="John Doe"></f7-list-item>
    5.   <f7-list-item divider title="Divider Here"></f7-list-item>
    6.   <f7-list-item link="#" title="Ivan Petrov"></f7-list-item>
    7.   <f7-list-item link="#" title="Jenna Smith"></f7-list-item>
    8. </f7-list>

    Grouped with sticky titles

    1. <f7-block-title>Grouped with sticky titles</f7-block-title>
    2.   <f7-list-group>
    3.     <f7-list-item title="A" group-title></f7-list-item>
    4.     <f7-list-item title="Aaron "></f7-list-item>
    5.     <f7-list-item title="Abbie"></f7-list-item>
    6.     <f7-list-item title="Adam"></f7-list-item>
    7.   </f7-list-group>
    8.   <f7-list-group>
    9.     <f7-list-item title="B" group-title></f7-list-item>
    10.     <f7-list-item title="Bailey"></f7-list-item>
    11.     <f7-list-item title="Barclay"></f7-list-item>
    12.     <f7-list-item title="Bartolo"></f7-list-item>
    13.   </f7-list-group>
    14.   <f7-list-group>
    15.     <f7-list-item title="C" group-title></f7-list-item>
    16.     <f7-list-item title="Caiden"></f7-list-item>
    17.     <f7-list-item title="Calvin"></f7-list-item>
    19.   </f7-list-group>
    20. </f7-list>

    Mixed and nested

    1. <f7-block-title>Mixed and nested</f7-block-title>
    2. <f7-list>
    3.   <f7-list-item link="#" title="Ivan Petrov" after="CEO">
    4.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    5.   </f7-list-item>
    6.   <f7-list-item link="#" title="Two icons here">
    7.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    8.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    9.   </f7-list-item>
    10.   <f7-list-item title="No icons here"></f7-list-item>
    11.   <li>
    12.     <ul>
    13.       <f7-list-item link="#" title="Ivan Petrov" after="CEO">
    14.         <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    15.       </f7-list-item>
    16.       <f7-list-item link="#" title="Two icons here">
    17.         <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    18.         <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    19.       </f7-list-item>
    20.       <f7-list-item title="No icons here"></f7-list-item>
    21.       <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
    22.         <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    23.       </f7-list-item>
    24.       <f7-list-item title="With toggle">
    25.         <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    26.         <f7-toggle slot="after"></f7-toggle>
    27.       </f7-list-item>
    28.     </ul>
    29.   </li>
    30.   <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
    31.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    32.   </f7-list-item>
    33.   <f7-list-item title="With toggle">
    34.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    35.     <f7-toggle slot="after"></f7-toggle>
    36.   </f7-list-item>
    37. </f7-list>

    Mixed, inset

    Tablet inset

    1. <f7-block-title>Tablet inset</f7-block-title>
    2. <f7-list tablet-inset>
    3.   <f7-list-item link="#" title="Ivan Petrov" after="CEO">
    4.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    5.   </f7-list-item>
    6.   <f7-list-item link="#" title="Two icons here">
    7.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    8.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    9.   </f7-list-item>
    10.   <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
    11.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    12.   </f7-list-item>
    13.   <f7-block-footer>
    14.     <p>This list block will look like "inset" only on tablets (iPad)</p>
    15.   </f7-block-footer>
    16. </f7-list>

    Media Lists

    1. <f7-block-title>Media Lists</f7-block-title>
    2. <f7-block>
    3.   <p>Media Lists are almost the same as Data Lists, but with a more flexible layout for visualization of more complex data, like products, services, userc, etc.</p>
    4. </f7-block>
    5. <f7-block-title>Songs</f7-block-title>
    6. <f7-list media-list>
    7.     link="#"
    8.     title="Yellow Submarine"
    9.     after="$15"
    10.     subtitle="Beatles"
    11.     text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    12.   >
    13.     <img slot="media" src="http://lorempixel.com/160/160/people/1" width="80" />
    14.   </f7-list-item>
    16.     link="#"
    17.     title="Don't Stop Me Now"
    18.     after="$22"
    19.     subtitle="Queen"
    20.     text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    21.   >
    22.     <img slot="media" src="http://lorempixel.com/160/160/people/2" width="80" />
    23.   </f7-list-item>
    24.   <f7-list-item
    25.     link="#"
    26.     title="Billie Jean"
    27.     after="$16"
    28.     subtitle="Michael Jackson"
    29.     text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    30.   >
    31.     <img slot="media" src="http://lorempixel.com/160/160/people/3" width="80" />
    32.   </f7-list-item>
    33. </f7-list>

    Mail App

    1. <f7-block-title>Mail App</f7-block-title>
    2. <f7-list media-list>
    3.   <f7-list-item
    4.     link="#"
    5.     title="Facebook"
    6.     after="17:14"
    7.     subtitle="New messages from John Doe"
    8.     text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    9.   ></f7-list-item>
    10.   <f7-list-item
    11.     link="#"
    12.     title="John Doe (via Twitter)"
    13.     after="17:11"
    14.     subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
    15.     text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    16.   ></f7-list-item>
    17.   <f7-list-item
    18.     link="#"
    19.     title="Facebook"
    20.     after="16:48"
    21.     subtitle="New messages from John Doe"
    22.     text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    23.   ></f7-list-item>
    24.   <f7-list-item
    25.     link="#"
    26.     title="John Doe (via Twitter)"
    27.     after="15:32"
    28.     subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
    29.     text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    30.   ></f7-list-item>
    31. </f7-list>

    Something more simple

    Inset

    1. <f7-block-title>Inset</f7-block-title>
    2. <f7-list media-list inset>
    3.   <f7-list-item
    4.     link="#"
    5.     title="Yellow Submarine"
    6.     subtitle="Beatles">
    7.     <img slot="media" src="http://lorempixel.com/88/88/fashion/4" width="44" />
    8.   </f7-list-item>
    9.   <f7-list-item
    10.     link="#"
    11.     title="Don't Stop Me Now"
    12.     subtitle="Queen">
    13.     <img slot="media" src="http://lorempixel.com/88/88/fashion/5" width="44" />
    14.   </f7-list-item>
    15.   <f7-list-item
    16.     link="#"
    17.     title="Billie Jean"
    18.     subtitle="Michael Jackson">
    19.     <img slot="media" src="http://lorempixel.com/88/88/fashion/6" width="44" />
    20.   </f7-list-item>