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:
- 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 React component represents Framework7's List View component.
List Components
There are following components included:
List
/F7List
- main List View elementListGroup
/F7ListGroup
- list group element
List Properties
Prop | Type | Default | Description |
---|---|---|---|
<List> properties | |||
inset | boolean | false | Makes list block inset |
xsmallInset | boolean | Makes block inset when app width >= 480px | |
smallInset | boolean | Makes block inset when app width >= 568px | |
mediumInset | boolean | Makes block inset when app width >= 768px | |
largeInset | boolean | Makes block inset when app width >= 1024px | |
xlargeInset | boolean | Makes block inset when app width >= 1200px | |
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. | |
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 |
inlineLabels | boolean | false | Enables inline-styled labels for Form Inputs |
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) |
noHairlines | boolean | false | Removes outer hairlines |
noHairlinesMd | boolean | false | Removes outer hairlines for MD theme |
noHairlinesIos | boolean | false | Removes outer hairlines for iOS theme |
noHairlinesAurora | boolean | false | Removes outer hairlines for Aurora theme |
noHairlinesBetween | boolean | false | Removes inner hairlines between items |
noHairlinesBetweenMd | boolean | false | Removes inner hairlines between items for MD theme |
noHairlinesBetweenIos | boolean | false | Removes inner hairlines between items for iOS theme |
noHairlinesBetweenAurora | 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 |
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 React 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 listafter-list
- element will be inserted in the end of list view and right after<ul>
main listlist
- element will be inserted inside of<ul>
main list element
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
Simple List
<BlockTitle>Simple List</BlockTitle>
<List simple-list>
<ListItem title="Item 1"></ListItem>
<ListItem title="Item 2"></ListItem>
<ListItem title="Item 3"></ListItem>
</List>
Simple List Links
<BlockTitle>Simple Links List</BlockTitle>
<List>
<ListItem title="Link 1" link="#"></ListItem>
<ListItem title="Link 2" link="#"></ListItem>
<ListItem title="Link 3" link="#"></ListItem>
</List>
Data list, with icons
<BlockTitle>Data list, with icons</BlockTitle>
<List>
<ListItem title="Ivan Petrov" after="CEO">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem title="John Doe" badge="5">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem title="Jenna Smith">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
</List>
Links
<BlockTitle>Links</BlockTitle>
<List>
<ListItem link="#" title="Ivan Petrov" after="CEO">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem link="#" title="John Doe" after="Cleaner">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem link="#" title="Jenna Smith">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
</List>
Links, Header, Footer
<BlockTitle>Links, Header, Footer</BlockTitle>
<List>
<ListItem link="#" header="Name" title="John Doe" after="Edit">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
</List>
Links, no icons
<BlockTitle>Links, no icons</BlockTitle>
<List>
<ListItem link="#" title="Ivan Petrov"></ListItem>
<ListItem link="#" title="John Doe"></ListItem>
<ListItem divider title="Divider Here"></ListItem>
<ListItem link="#" title="Ivan Petrov"></ListItem>
<ListItem link="#" title="Jenna Smith"></ListItem>
</List>
Grouped with sticky titles
<BlockTitle>Grouped with sticky titles</BlockTitle>
<List>
<ListGroup>
<ListItem title="A" groupTitle></ListItem>
<ListItem title="Aaron "></ListItem>
<ListItem title="Abbie"></ListItem>
<ListItem title="Adam"></ListItem>
</ListGroup>
<ListGroup>
<ListItem title="B" groupTitle></ListItem>
<ListItem title="Bailey"></ListItem>
<ListItem title="Barclay"></ListItem>
<ListItem title="Bartolo"></ListItem>
</ListGroup>
<ListGroup>
<ListItem title="C" groupTitle></ListItem>
<ListItem title="Caiden"></ListItem>
<ListItem title="Calvin"></ListItem>
<ListItem title="Candy"></ListItem>
</ListGroup>
</List>
Mixed and nested
<BlockTitle>Mixed and nested</BlockTitle>
<List>
<ListItem link="#" title="Ivan Petrov" after="CEO">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem link="#" title="Two icons here">
<Icon slot="media" icon="demo-list-icon"></Icon>
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem title="No icons here"></ListItem>
<li>
<ul>
<ListItem link="#" title="Ivan Petrov" after="CEO">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem link="#" title="Two icons here">
<Icon slot="media" icon="demo-list-icon"></Icon>
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem title="No icons here"></ListItem>
<ListItem link="#" title="Ultra long text goes here, no, it is really really long">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem title="With toggle">
<Icon slot="media" icon="demo-list-icon"></Icon>
<Toggle slot="after"></Toggle>
</ListItem>
</ul>
</li>
<ListItem link="#" title="Ultra long text goes here, no, it is really really long">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem title="With toggle">
<Icon slot="media" icon="demo-list-icon"></Icon>
<Toggle slot="after"></Toggle>
</ListItem>
</List>
Mixed, inset
<BlockTitle>Mixed, inset</BlockTitle>
<List>
<ListItem link="#" title="Ivan Petrov" after="CEO">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem link="#" title="Two icons here">
<Icon slot="media" icon="demo-list-icon"></Icon>
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem link="#" title="Ultra long text goes here, no, it is really really long">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem title="With toggle">
<Icon slot="media" icon="demo-list-icon"></Icon>
<Toggle slot="after"></Toggle>
</ListItem>
<BlockFooter>
<p>Here comes some useful information about list above</p>
</BlockFooter>
</List>
Tablet inset
<BlockTitle>Tablet inset</BlockTitle>
<List mediumInset>
<ListItem link="#" title="Ivan Petrov" after="CEO">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem link="#" title="Two icons here">
<Icon slot="media" icon="demo-list-icon"></Icon>
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<ListItem link="#" title="Ultra long text goes here, no, it is really really long">
<Icon slot="media" icon="demo-list-icon"></Icon>
</ListItem>
<BlockFooter>
<p>This list block will look like "inset" only on tablets (iPad)</p>
</BlockFooter>
</List>
Media Lists
<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 mediaList>
<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" 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" 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" src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg" width="80" />
</ListItem>
</List>
Mail App
<BlockTitle>Mail App</BlockTitle>
<List mediaList>
<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>
<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>
<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>
<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."
></ListItem>
</List>
Something more simple
<BlockTitle>Something more simple</BlockTitle>
<List mediaList>
<ListItem
title="Yellow Submarine"
subtitle="Beatles">
<img slot="media" 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" src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg" width="44" />
</ListItem>
<ListItem
title="Billie Jean"
subtitle="Michael Jackson">
<img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg" width="44" />
</ListItem>
</List>
Inset
<BlockTitle>Inset</BlockTitle>
<List mediaList inset>
<ListItem
link="#"
title="Yellow Submarine"
subtitle="Beatles">
<img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44" />
</ListItem>
<ListItem
link="#"
title="Don't Stop Me Now"
subtitle="Queen">
<img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44" />
</ListItem>
<ListItem
link="#"
title="Billie Jean"
subtitle="Michael Jackson">
<img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
</ListItem>
</List>