List Item Vue Component

    • - main list item element
    • **f7-list-item-row** - list item row element for custom layout
    • **f7-list-item-cell** - list item cell element for custom layout
    EventDescription
    <f7-list-item> events
    clickEvent will be triggeres when user clicks on list item
    changeEvent will be triggeres when “change” event occurs on list item input (radio or checkbox)
    swipeoutEvent will be triggered while you move swipeout element. event.detail.progress contains current opened progress percentage
    swipeout:openEvent will be triggered when swipeout element starts its opening animation
    swipeout:openedEvent will be triggered after swipeout element completes its opening animation
    swipeout:closeEvent will be triggered when swipeout element starts its closing animation
    swipeout:closedEvent will be triggered after swipeout element completes its closing animation
    swipeout:deleteEvent will be triggered after swipeout element starts its delete animation
    swipeout:deletedEvent will be triggered after swipeout element completes its delete animation right before it will be removed from DOM
    accordion:beforeopenEvent will be triggered right before accordion content starts its opening animation. event.detail.prevent contains function that will prevent accordion from opening when called
    accordion:openEvent will be triggered when accordion content starts its opening animation.
    accordion:openedEvent will be triggered after accordion content completes its opening animation.
    accordion:beforecloseEvent will be triggered right before accordion content starts its closing animation. event.detail.prevent contains function that will prevent accordion from closing when called
    accordion:closeEvent will be triggered when accordion content starts its closing animation.
    accordion:closedEvent will be triggered after accordion content completes its closing animation.
    • **root-start** - element will be inserted in the beginning of <li> element
    • **root** / **root-end** - element will be inserted in the end of <li> element
    • **content-start** - element will be inserted in the beginning of <div class="item-content"> element
    • **content** / **content-end** - element will be inserted in the end of <div class="item-content"> element
    • **inner-start** - element will be inserted in the beginning of <div class="item-inner"> element
    • **default** / **inner** / **inner-end** - element will be inserted in the end of <div class="item-inner"> element
    • **media** - element will be inserted inside of <div class="item-media"> element
    • **before-title** - element will be inserted before <div class="item-title"> element
    • **title** - element will be inserted inside of <div class="item-title"> element
    • **after-title** - element will be inserted after <div class="item-title"> element
    • **subtitle** - element will be inserted inside of <div class="item-subtitle"> element
    • **text** - element will be inserted inside of <div class="item-text"> element
    • **header** - element will be inserted inside of <div class="item-header"> element
    • **footer** - element will be inserted inside of <div class="item-footer"> element
    • **after-start** - element will be inserted in the beginning of <div class="item-after"> element
    • **after** / **after-end** - element will be inserted in the end of <div class="item-after"> element

    Simple List

    1. <f7-block-title>Simple List</f7-block-title>
    2. <f7-list simple-list>
    3.   <f7-list-item title="Item 1"></f7-list-item>
    4.   <f7-list-item title="Item 2"></f7-list-item>
    5.   <f7-list-item title="Item 3"></f7-list-item>
    6. </f7-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>
    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>
    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>
    18.     <f7-list-item title="Candy"></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

    1. <f7-block-title>Mixed, inset</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 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-list-item title="With toggle">
    14.     <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
    15.     <f7-toggle slot="after"></f7-toggle>
    16.   </f7-list-item>
    17.   <f7-block-footer>
    18.     <p>Here comes some useful information about list above</p>
    19.   </f7-block-footer>
    20. </f7-list>

    Tablet inset

    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.   <f7-list-item
    8.     link="#"
    9.     title="Yellow Submarine"
    10.     after="$15"
    11.     subtitle="Beatles"
    13.   >
    14.     <img slot="media" src="http://lorempixel.com/160/160/people/1" width="80" />
    15.   <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

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

    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>