List React 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:

List React component represents Framework7's List View component.

List Components

There are following components included:

List Properties

PropTypeDefaultDescription
<List> properties
insetbooleanMakes list inset. insetIos and insetMd props available for theme specific layout
xsmallInsetbooleanMakes list inset when app width >= 480px. xsmallInsetIos and xsmallInsetMd props available for theme specific layout
smallInsetbooleanMakes list inset when app width >= 568px. smallInsetIos and smallInsetMd props available for theme specific layout
mediumInsetbooleanMakes list inset when app width >= 768px. mediumInsetIos and mediumInsetMd props available for theme specific layout
largeInsetbooleanMakes list inset when app width >= 1024px. largeInsetIos and largeInsetMd props available for theme specific layout
xlargeInsetbooleanMakes list inset when app width >= 1200px. xlargeInsetIos and xlargeInsetMd props available for theme specific layout
strongbooleanAdds extra highlighting to the list. strongIos and strongMd props available for theme specific layout
outlinebooleanMakes list outline (with border). outlineIos and outlineMd props available for theme specific layout
dividersbooleanAdds dividers (borders) between list items. dividersIos and dividersMd props available for theme specific layout
mediaListbooleanfalseEnables Media List
linksListbooleanfalseEnables simplified Links List
simpleListbooleanfalseEnables simplified Simple List
sortablebooleanfalseEnables Sortable List
sortableOppositebooleanfalseRenders sortable handler on opposite side (on left in LTR)
sortableTapHoldbooleanfalseMakes 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
sortableEnabledbooleanfalseEnables sorting on sortable list
sortableMoveElementsbooleanWhen passed it will overwrite same sortable.moveElements global app parameter.
menuListbooleanEnables Menu List
accordionbooleanfalseEnables Accordion List
accordionOppositebooleanfalseRenders accordion chevron icon on opposite side (on left in LTR)
contactsListbooleanfalseEnables Contacts List by adding required additional classes for styling
formbooleanfalseEnables <form> tag on list block instead of <div>
formStoreDatabooleanfalseEnables form storage for the current form
noChevronbooleanfalseRemoves "chevron" icon on nested list item links
chevronCenterbooleanfalseSets "chevron" icon on nested media list items on center (vertically)
tabbooleanfalseAdds additional "tab" class when block should be used as a Tab
tabActivebooleanfalseAdds additional "tab-active" class when block used as a Tab and makes it active tab
virtualListbooleanfalseEnables Virtual List
virtualListParamsobjectObject with Virtual List Parameters
<ListGroup> properties
mediaListbooleanfalseEnables Media List for this group
sortablebooleanfalseEnables Sortable List for this group
sortableTapHoldbooleanfalseMakes 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
simpleListbooleanfalseEnables simplified Simple List for this group

List Events

EventDescription
<List> events
tabShowEvent will be triggered when List Block-Tab becomes visible/active
tabHideEvent 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)
<List> Sortable specific events
sortableEnableEvent will be triggered when sortable mode is enabled
sortableDisableEvent will be triggered when sortable mode is disabled
sortableSortEvent 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
virtualItemBeforeInsertEvent will be triggered before item will be added to virtual document fragment
virtualItemsBeforeInsertEvent will be triggered after current DOM list will be removed and before new document will be inserted
virtualItemsAfterInsertEvent will be triggered after new document fragment with items inserted
virtualBeforeClearEvent will be triggered before current DOM list will be removed and replaced with new document fragment

List Slots

List React component (<List>) has additional slots for custom elements:

Virtual List

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

Sortable List

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

Accordion List

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

Examples

list.jsx
import React from 'react';
import {
  Navbar,
  Page,
  BlockTitle,
  BlockFooter,
  Block,
  List,
  ListItem,
  ListGroup,
  Icon,
  Toggle,
} from 'framework7-react';

export default () => (
  <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">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="John Doe" badge="5">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="Jenna Smith">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
    </List>
    <BlockTitle>Links</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem link="#" title="Ivan Petrov" after="CEO">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="John Doe" after="Cleaner">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Jenna Smith">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
    </List>
    <BlockTitle>Links, Header, Footer</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem link="#" header="Name" title="John Doe" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
        <Icon slot="media" 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>
      <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">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Two icons here">
        <Icon slot="media" icon="icon-f7" />
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="No icons here" />
      <li>
        <ul>
          <ListItem link="#" title="Ivan Petrov" after="CEO">
            <Icon slot="media" icon="icon-f7" />
          </ListItem>
          <ListItem link="#" title="Two icons here">
            <Icon slot="media" icon="icon-f7" />
            <Icon slot="media" icon="icon-f7" />
          </ListItem>
          <ListItem title="No icons here" />
          <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
            <Icon slot="media" icon="icon-f7" />
          </ListItem>
          <ListItem title="With toggle">
            <Icon slot="media" icon="icon-f7" />
            <Toggle slot="after" />
          </ListItem>
        </ul>
      </li>
      <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="With toggle">
        <Icon slot="media" icon="icon-f7" />
        <Toggle slot="after" />
      </ListItem>
    </List>

    <BlockTitle>Tablet inset</BlockTitle>
    <List dividersIos outlineIos strongIos mediumInset>
      <ListItem link="#" title="Ivan Petrov" after="CEO">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Two icons here">
        <Icon slot="media" icon="icon-f7" />
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <BlockFooter slot="after-list">
        <p>This list block will look like "inset" only on tablets (iPad)</p>
      </BlockFooter>
    </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, user, 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={{ borderRadius: '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={{ borderRadius: '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={{ borderRadius: '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={{ borderRadius: '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={{ borderRadius: '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={{ borderRadius: '8px' }}
          src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg"
          width="44"
        />
      </ListItem>
    </List>
  </Page>
);