List Vue Component

List Components
List Properties
List Events
List Slots
Virtual List
Sortable List
Accordion List
Examples

List views are versatile and powerful user interface components frequently found in 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

List Vue component represents Framework7's List View component.

List Components

There are following components included:

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

List Properties

Prop	Type	Default	Description
<f7-list> properties
inset	boolean	false	Makes list block inset
xsmall-inset	boolean		Makes block inset when app width >= 480px
small-inset	boolean		Makes block inset when app width >= 568px
medium-inset	boolean		Makes block inset when app width >= 768px
large-inset	boolean		Makes block inset when app width >= 1024px
xlarge-inset	boolean		Makes block inset when app width >= 1200px
media-list	boolean	false	Enables Media List
links-list	boolean	false	Enables simplified Links List
simple-list	boolean	false	Enables simplified Simple List
sortable	boolean	false	Enables Sortable List
sortable-opposite	boolean	false	Renders sortable handler on opposite side (on left in LTR)
sortable-tap-hold	boolean	false	Makes list items sortable on item tap and hold (long press). In this case app will rely on custom `taphold` event. To make it work correctly, make sure you have also enabled `touch.tapHold: true` app parameter
sortable-enabled	boolean	false	Enables sorting on sortable list
sortable-move-elements	boolean		When passed it will overwrite same `sortable.moveElements` global app parameter.
menuList	boolean		Enables Menu List
accordion	boolean	false	Enables Accordion List
accordion-opposite	boolean	false	Renders accordion chevron icon on opposite side (on left in LTR)
contacts-list	boolean	false	Enables Contacts List by adding required additional classes for styling
form	boolean	false	Enables `<form>` tag on list block instead of `<div>`
form-store-data	boolean	false	Enables form storage for the current form
inline-labels	boolean	false	Enables inline-styled labels for Form Inputs
no-chevron	boolean	false	Removes "chevron" icon on nested list item links
chevron-center	boolean	false	Sets "chevron" icon on nested media list items on center (vertically)
no-hairlines	boolean	false	Removes outer hairlines
no-hairlines-md	boolean	false	Removes outer hairlines for MD theme
no-hairlines-ios	boolean	false	Removes outer hairlines for iOS theme
no-hairlines-aurora	boolean	false	Removes outer hairlines for Aurora theme
no-hairlines-between	boolean	false	Removes inner hairlines between items
no-hairlines-between-md	boolean	false	Removes inner hairlines between items for MD theme
no-hairlines-between-ios	boolean	false	Removes inner hairlines between items for iOS theme
no-hairlines-between-aurora	boolean	false	Removes inner hairlines between items for Aurora theme
tab	boolean	false	Adds additional "tab" class when block should be used as a Tab
tab-active	boolean	false	Adds additional "tab-active" class when block used as a Tab and makes it active tab
virtual-list	boolean	false	Enables Virtual List
virtual-list-params	object		Object with Virtual List Parameters
<f7-list-group> properties
media-list	boolean	false	Enables Media List for this group
sortable	boolean	false	Enables Sortable List for this group
sortable-tap-hold	boolean	false	Makes list items sortable on item tap and hold (long press). In this case app will rely on custom `taphold` event. To make it work correctly, make sure you have also enabled `touch.tapHold: true` app parameter
simple-list	boolean	false	Enables simplified Simple List for this group

List Events

Event	Description
<f7-list> events
tab:show	Event will be triggered when List Block-Tab becomes visible/active
tab:hide	Event will be triggered when List Block-Tab becomes invisible/inactive
submit	Event will be triggered on list-form submit when list used as form (with enabled `form` prop)
<f7-list> Sortable specific events
sortable:enable	Event will be triggered when sortable mode is enabled
sortable:disable	Event will be triggered when sortable mode is disabled
sortable:sort	Event 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:itembeforeinsert	Event will be triggered before item will be added to virtual document fragment
virtual:itemsbeforeinsert	Event will be triggered after current DOM list will be removed and before new document will be inserted
virtual:itemsafterinsert	Event will be triggered after new document fragment with items inserted
virtual:beforeclear	Event 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

Virtual List

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

Sortable List

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

Accordion List

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

Examples

<template>
<f7-page>
  <f7-navbar title="List View"></f7-navbar>
  <f7-block-title>Simple List</f7-block-title>
  <f7-list simple-list>
    <f7-list-item title="Item 1"></f7-list-item>
    <f7-list-item title="Item 2"></f7-list-item>
    <f7-list-item title="Item 3"></f7-list-item>
  </f7-list>
  <f7-block-title>Simple Links List</f7-block-title>
  <f7-list>
    <f7-list-item title="Link 1" link="#"></f7-list-item>
    <f7-list-item title="Link 2" link="#"></f7-list-item>
    <f7-list-item title="Link 3" link="#"></f7-list-item>
  </f7-list>
  <f7-block-title>Data list, with icons</f7-block-title>
  <f7-list>
    <f7-list-item title="Ivan Petrov" after="CEO">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item title="John Doe" badge="5">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item title="Jenna Smith">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
  </f7-list>
  <f7-block-title>Links</f7-block-title>
  <f7-list>
    <f7-list-item link="#" title="Ivan Petrov" after="CEO">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item link="#" title="John Doe" after="Cleaner">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item link="#" title="Jenna Smith">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
  </f7-list>
  <f7-block-title>Links, Header, Footer</f7-block-title>
  <f7-list>
    <f7-list-item link="#" header="Name" title="John Doe" after="Edit">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item link="#" header="Email" title="john@doe" footer="Home" after="Edit">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
  </f7-list>
  <f7-block-title>Links, no icons</f7-block-title>
  <f7-list>
    <f7-list-item link="#" title="Ivan Petrov"></f7-list-item>
    <f7-list-item link="#" title="John Doe"></f7-list-item>
    <f7-list-item divider title="Divider Here"></f7-list-item>
    <f7-list-item link="#" title="Ivan Petrov"></f7-list-item>
    <f7-list-item link="#" title="Jenna Smith"></f7-list-item>
  </f7-list>
  <f7-block-title>Grouped with sticky titles</f7-block-title>
  <f7-list>
    <f7-list-group>
      <f7-list-item title="A" group-title></f7-list-item>
      <f7-list-item title="Aaron "></f7-list-item>
      <f7-list-item title="Abbie"></f7-list-item>
      <f7-list-item title="Adam"></f7-list-item>
    </f7-list-group>
    <f7-list-group>
      <f7-list-item title="B" group-title></f7-list-item>
      <f7-list-item title="Bailey"></f7-list-item>
      <f7-list-item title="Barclay"></f7-list-item>
      <f7-list-item title="Bartolo"></f7-list-item>
    </f7-list-group>
    <f7-list-group>
      <f7-list-item title="C" group-title></f7-list-item>
      <f7-list-item title="Caiden"></f7-list-item>
      <f7-list-item title="Calvin"></f7-list-item>
      <f7-list-item title="Candy"></f7-list-item>
    </f7-list-group>
  </f7-list>
  <f7-block-title>Mixed and nested</f7-block-title>
  <f7-list>
    <f7-list-item link="#" title="Ivan Petrov" after="CEO">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item link="#" title="Two icons here">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item title="No icons here"></f7-list-item>
    <li>
      <ul>
        <f7-list-item link="#" title="Ivan Petrov" after="CEO">
          <template #media>
            <f7-icon icon="demo-list-icon"></f7-icon>
          </template>
        </f7-list-item>
        <f7-list-item link="#" title="Two icons here">
          <template #media>
            <f7-icon icon="demo-list-icon"></f7-icon>
            <f7-icon icon="demo-list-icon"></f7-icon>
          </template>
        </f7-list-item>
        <f7-list-item title="No icons here"></f7-list-item>
        <f7-list-item
          link="#"
          title="Ultra long text goes here, no, it is really really long"
        >
          <template #media>
            <f7-icon icon="demo-list-icon"></f7-icon>
          </template>
        </f7-list-item>
        <f7-list-item title="With toggle">
          <template #media>
            <f7-icon icon="demo-list-icon"></f7-icon>
          </template>

          <template #after>
            <f7-toggle></f7-toggle>
          </template>
        </f7-list-item>
      </ul>
    </li>
    <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item title="With toggle">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
      <template #after>
        <f7-toggle></f7-toggle>
      </template>
    </f7-list-item>
  </f7-list>
  <f7-block-title>Mixed, inset</f7-block-title>
  <f7-list>
    <f7-list-item link="#" title="Ivan Petrov" after="CEO">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item link="#" title="Two icons here">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item title="With toggle">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
      <template #after>
        <f7-toggle></f7-toggle>
      </template>
    </f7-list-item>
    <f7-block-footer>
      <p>Here comes some useful information about list above</p>
    </f7-block-footer>
  </f7-list>
  <f7-block-title>Tablet inset</f7-block-title>
  <f7-list medium-inset>
    <f7-list-item link="#" title="Ivan Petrov" after="CEO">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item link="#" title="Two icons here">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
      <template #media>
        <f7-icon icon="demo-list-icon"></f7-icon>
      </template>
    </f7-list-item>
    <f7-block-footer>
      <p>This list block will look like "inset" only on tablets (iPad)</p>
    </f7-block-footer>
  </f7-list>

  <f7-block-title>Media Lists</f7-block-title>
  <f7-block>
    <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, users, etc.
    </p>
  </f7-block>
  <f7-block-title>Songs</f7-block-title>
  <f7-list media-list>
    <f7-list-item
      link="#"
      title="Yellow Submarine"
      after="$15"
      subtitle="Beatles"
      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."
    >
      <template #media>
        <img src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="80" />
      </template>
    </f7-list-item>
    <f7-list-item
      link="#"
      title="Don't Stop Me Now"
      after="$22"
      subtitle="Queen"
      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."
    >
      <template #media>
        <img src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg" width="80" />
      </template>
    </f7-list-item>
    <f7-list-item
      link="#"
      title="Billie Jean"
      after="$16"
      subtitle="Michael Jackson"
      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."
    >
      <template #media>
        <img src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg" width="80" />
      </template>
    </f7-list-item>
  </f7-list>
  <f7-block-title>Mail App</f7-block-title>
  <f7-list media-list>
    <f7-list-item
      link="#"
      title="Facebook"
      after="17:14"
      subtitle="New messages from John Doe"
      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."
    ></f7-list-item>
    <f7-list-item
      link="#"
      title="John Doe (via Twitter)"
      after="17:11"
      subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
      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."
    ></f7-list-item>
    <f7-list-item
      link="#"
      title="Facebook"
      after="16:48"
      subtitle="New messages from John Doe"
      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."
    ></f7-list-item>
    <f7-list-item
      link="#"
      title="John Doe (via Twitter)"
      after="15:32"
      subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
      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."
    ></f7-list-item>
  </f7-list>
  <f7-block-title>Something more simple</f7-block-title>
  <f7-list media-list>
    <f7-list-item title="Yellow Submarine" subtitle="Beatles">
      <template #media>
        <img src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="44" />
      </template>
    </f7-list-item>
    <f7-list-item link="#" title="Don't Stop Me Now" subtitle="Queen">
      <template #media>
        <img src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg" width="44" />
      </template>
    </f7-list-item>
    <f7-list-item title="Billie Jean" subtitle="Michael Jackson">
      <template #media>
        <img src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg" width="44" />
      </template>
    </f7-list-item>
  </f7-list>
  <f7-block-title>Inset</f7-block-title>
  <f7-list media-list inset>
    <f7-list-item link="#" title="Yellow Submarine" subtitle="Beatles">
      <template #media>
        <img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44" />
      </template>
    </f7-list-item>
    <f7-list-item link="#" title="Don't Stop Me Now" subtitle="Queen">
      <template #media>
        <img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44" />
      </template>
    </f7-list-item>
    <f7-list-item link="#" title="Billie Jean" subtitle="Michael Jackson">
      <template #media>
        <img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
      </template>
    </f7-list-item>
  </f7-list>
</f7-page>
</template>

<style>
.demo-list-icon,
.icon-f7 {
  background: #ccc;
  display: block;
  position: relative;
}
.ios .demo-list-icon,
.ios .icon-f7,
.ios .icon-vi {
  width: 29px;
  height: 29px;
  border-radius: 6px;
  box-sizing: border-box;
}
.md .demo-list-icon,
.md .icon-f7,
.md .icon-vi {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}
.aurora .demo-list-icon,
.aurora .icon-f7,
.aurora .icon-vi {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
</style>