List View - 图1

List Vue Component

List views are versatile and powerful user interface compontents frequently found in iOS 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.
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 addional 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-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
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

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>

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>

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>

1. <f7-block-title>Links, Header, Footer</f7-block-title>
2. <f7-list>
3. <f7-list-item link="#" header="Name" title="John Doe" after="Edit">
4. <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
5. </f7-list-item>
6. <f7-list-item link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
7. <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
8. </f7-list-item>
9. <f7-list-item link="#" header="Email" title="john@doe" footer="Home" after="Edit">
10. <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
11. </f7-list-item>
12. <f7-list-item link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
13. <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
14. </f7-list-item>
15. </f7-list>

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>
5. <f7-list-item divider title="Divider Here"></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-group>
4. <f7-list-item title="A" group-title></f7-list-item>
5. <f7-list-item title="Aaron "></f7-list-item>
6. <f7-list-item title="Abbie"></f7-list-item>
7. <f7-list-item title="Adam"></f7-list-item>
8. </f7-list-group>
9. <f7-list-group>
10. <f7-list-item title="B" group-title></f7-list-item>
11. <f7-list-item title="Bailey"></f7-list-item>
12. <f7-list-item title="Barclay"></f7-list-item>
13. <f7-list-item title="Bartolo"></f7-list-item>
14. </f7-list-group>
15. <f7-list-group>
16. <f7-list-item title="C" group-title></f7-list-item>
17. <f7-list-item title="Caiden"></f7-list-item>
18. <f7-list-item title="Calvin"></f7-list-item>
19. <f7-list-item title="Candy"></f7-list-item>
20. </f7-list-group>
21. </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

1. <f7-block-title>Tablet inset</f7-block-title>
2. <f7-list medium-inset>
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-block-footer>
14. <p>This list block will look like "inset" only on tablets (iPad)</p>
15. </f7-block-footer>
16. </f7-list>

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"
12. 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."
13. >
14. <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="80" />
15. </f7-list-item>
16. <f7-list-item
17. link="#"
18. title="Don't Stop Me Now"
19. after="$22"
20. subtitle="Queen"
21. 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."
22. >
23. <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg" width="80" />
24. </f7-list-item>
25. <f7-list-item
26. link="#"
27. title="Billie Jean"
28. after="$16"
29. subtitle="Michael Jackson"
30. 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."
31. >
32. <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg" width="80" />
33. </f7-list-item>
34. </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="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" 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="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg" width="44" />
13. </f7-list-item>
14. <f7-list-item
15. title="Billie Jean"
16. subtitle="Michael Jackson">
17. <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg" 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="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" 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="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" 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="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
20. </f7-list-item>
21. </f7-list>

← Link

List Button →