List Svelte Component

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 Svelte component represents Framework7's List View component.

List Components

There are following components included:

List - main List View element
ListGroup - list group element

List Properties

Prop	Type	Default	Description
<List> properties
ul	boolean	true	Wraps children with `<ul>`. Recommended to disable used with nested `<ListGroup>`
inset	boolean		Makes list inset. `insetIos` and `insetMd` props available for theme specific layout
xsmallInset	boolean		Makes list inset when app width >= 480px. `xsmallInsetIos` and `xsmallInsetMd` props available for theme specific layout
smallInset	boolean		Makes list inset when app width >= 568px. `smallInsetIos` and `smallInsetMd` props available for theme specific layout
mediumInset	boolean		Makes list inset when app width >= 768px. `mediumInsetIos` and `mediumInsetMd` props available for theme specific layout
largeInset	boolean		Makes list inset when app width >= 1024px. `largeInsetIos` and `largeInsetMd` props available for theme specific layout
xlargeInset	boolean		Makes list inset when app width >= 1200px. `xlargeInsetIos` and `xlargeInsetMd` props available for theme specific layout
strong	boolean		Adds extra highlighting to the list. `strongIos` and `strongMd` props available for theme specific layout
outline	boolean		Makes list outline (with border). `outlineIos` and `outlineMd` props available for theme specific layout
dividers	boolean		Adds dividers (borders) between list items. `dividersIos` and `dividersMd` props available for theme specific layout
mediaList	boolean	false	Enables Media List
linksList	boolean	false	Enables simplified Links List
simpleList	boolean	false	Enables simplified Simple List
sortable	boolean	false	Enables Sortable List
sortableOpposite	boolean	false	Renders sortable handler on opposite side (on left in LTR)
sortableTapHold	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
sortableEnabled	boolean	false	Enables sorting on sortable list
sortableMoveElements	boolean		When passed it will overwrite same `sortable.moveElements` global app parameter.
menuList	boolean		Enables Menu List
accordion	boolean	false	Enables Accordion List
accordionOpposite	boolean	false	Renders accordion chevron icon on opposite side (on left in LTR)
contactsList	boolean	false	Enables Contacts List by adding required additional classes for styling
form	boolean	false	Enables `<form>` tag on list block instead of `<div>`
formStoreData	boolean	false	Enables form storage for the current form
noChevron	boolean	false	Removes "chevron" icon on nested list item links
chevronCenter	boolean	false	Sets "chevron" icon on nested media list items on center (vertically)
tab	boolean	false	Adds additional "tab" class when block should be used as a Tab
tabActive	boolean	false	Adds additional "tab-active" class when block used as a Tab and makes it active tab
virtualList	boolean	false	Enables Virtual List
virtualListParams	object		Object with Virtual List Parameters
<ListGroup> properties
mediaList	boolean	false	Enables Media List for this group
sortable	boolean	false	Enables Sortable List for this group
sortableTapHold	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
simpleList	boolean	false	Enables simplified Simple List for this group

List Events

Event	Description
<List> events
tabShow	Event will be triggered when List Block-Tab becomes visible/active
tabHide	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)
<List> Sortable specific events
sortableEnable	Event will be triggered when sortable mode is enabled
sortableDisable	Event will be triggered when sortable mode is disabled
sortableSort	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
<List> Virtual List specific events
virtualItemBeforeInsert	Event will be triggered before item will be added to virtual document fragment
virtualItemsBeforeInsert	Event will be triggered after current DOM list will be removed and before new document will be inserted
virtualItemsAfterInsert	Event will be triggered after new document fragment with items inserted
virtualBeforeClear	Event will be triggered before current DOM list will be removed and replaced with new document fragment

List Slots

List Svelte component (<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 Svelte Component documentation.

Sortable List

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

Accordion List

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

Examples

list.svelte

<script>
  import {
    Navbar,
    Page,
    BlockTitle,
    Block,
    List,
    ListItem,
    ListGroup,
    Toggle,
  } from 'framework7-svelte';
</script>

<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-invalid-attribute -->
<Page>
  <Navbar title="List View" />
  <Block>
    <p>
      Framework7 allows you to be flexible with list views (table views). You can make them as
      navigation menus, you can use there icons, inputs, and any elements inside of the list, and
      even make them nested:
    </p>
  </Block>
  <BlockTitle>Simple List</BlockTitle>
  <List dividersIos simpleList>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>
  <BlockTitle>Strong List</BlockTitle>
  <List dividersIos simpleList strong>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong Outline List</BlockTitle>
  <List dividersIos simpleList strong outline>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong Inset List</BlockTitle>
  <List dividersIos simpleList strong inset>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong Outline Inset List</BlockTitle>
  <List dividersIos simpleList strong outline inset>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Simple Links List</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem title="Link 1" link="#" />
    <ListItem title="Link 2" link="#" />
    <ListItem title="Link 3" link="#" />
  </List>
  <BlockTitle>Data list, with icons</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem title="Ivan Petrov" after="CEO"><i slot="media" class="icon icon-f7" /></ListItem>
    <ListItem title="John Doe" badge="5"><i slot="media" class="icon icon-f7" /></ListItem>
    <ListItem title="Jenna Smith"><i slot="media" class="icon icon-f7" /></ListItem>
  </List>
  <BlockTitle>Links</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="John Doe" after="Cleaner">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="Jenna Smith"><i slot="media" class="icon icon-f7" /></ListItem>
  </List>
  <BlockTitle>Links, Header, Footer</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem link="#" header="Name" title="John Doe" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
  </List>
  <BlockTitle>Links, no icons</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem link="#" title="Ivan Petrov" />
    <ListItem link="#" title="John Doe" />
    <ListItem groupTitle title="Group Title Here" />
    <ListItem link="#" title="Ivan Petrov" />
    <ListItem link="#" title="Jenna Smith" />
  </List>
  <BlockTitle>Grouped with sticky titles</BlockTitle>
  <List dividersIos outlineIos strongIos ul={false}>
    <ListGroup>
      <ListItem title="A" groupTitle />
      <ListItem title="Aaron " />
      <ListItem title="Abbie" />
      <ListItem title="Adam" />
    </ListGroup>
    <ListGroup>
      <ListItem title="B" groupTitle />
      <ListItem title="Bailey" />
      <ListItem title="Barclay" />
      <ListItem title="Bartolo" />
    </ListGroup>
    <ListGroup>
      <ListItem title="C" groupTitle />
      <ListItem title="Caiden" />
      <ListItem title="Calvin" />
      <ListItem title="Candy" />
    </ListGroup>
  </List>
  <BlockTitle>Mixed and nested</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <svelte:fragment slot="media">
        <i class="icon icon-f7" />
        <i class="icon icon-f7" />
      </svelte:fragment>
    </ListItem>
    <ListItem title="No icons here" />
    <li>
      <ul>
        <ListItem link="#" title="Ivan Petrov" after="CEO">
          <i slot="media" class="icon icon-f7" />
        </ListItem>
        <ListItem link="#" title="Two icons here">
          <svelte:fragment slot="media">
            <i class="icon icon-f7" />
            <i class="icon icon-f7" />
          </svelte:fragment>
        </ListItem>
        <ListItem title="No icons here" />
        <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
          <i slot="media" class="icon icon-f7" />
        </ListItem>
        <ListItem title="With toggle">
          <i slot="media" class="icon icon-f7" />
          <span slot="after">
            <Toggle />
          </span>
        </ListItem>
      </ul>
    </li>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem title="With toggle">
      <i slot="media" class="icon icon-f7" />
      <span slot="after">
        <Toggle />
      </span>
    </ListItem>
  </List>

  <BlockTitle>Tablet inset</BlockTitle>
  <List dividersIos outlineIos strongIos mediumInset>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <svelte:fragment slot="media">
        <i class="icon icon-f7" />
        <i class="icon icon-f7" />
      </svelte:fragment>
    </ListItem>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <div class="block-footer" slot="after-list">
      <p>This list block will look like "inset" only on tablets (iPad)</p>
    </div>
  </List>

  <BlockTitle>Media Lists</BlockTitle>
  <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>
  </Block>
  <BlockTitle>Songs</BlockTitle>
  <List dividersIos mediaList outlineIos strongIos>
    <ListItem
      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."
    >
      <img
        slot="media"
        style="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
        width="80"
      />
    </ListItem>
    <ListItem
      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."
    >
      <img
        slot="media"
        style="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
        width="80"
      />
    </ListItem>
    <ListItem
      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."
    >
      <img
        slot="media"
        style="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
        width="80"
      />
    </ListItem>
  </List>
  <BlockTitle>Mail App</BlockTitle>
  <List dividersIos mediaList outlineIos strongIos>
    <ListItem
      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."
    />
    <ListItem
      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."
    />
    <ListItem
      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."
    />
    <ListItem
      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."
    />
  </List>
  <BlockTitle>Something more simple</BlockTitle>
  <List dividersIos mediaList outlineIos strongIos>
    <ListItem title="Yellow Submarine" subtitle="Beatles">
      <img
        slot="media"
        style="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg"
        width="44"
      />
    </ListItem>
    <ListItem link="#" title="Don't Stop Me Now" subtitle="Queen">
      <img
        slot="media"
        style="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg"
        width="44"
      />
    </ListItem>
    <ListItem title="Billie Jean" subtitle="Michael Jackson">
      <img
        slot="media"
        style="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg"
        width="44"
      />
    </ListItem>
  </List>
</Page>

Improve this Doc

On this page

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