List Item - 图1

List Item Vue Component

List Item Components

There are following components included:

  • **f7-list-item** - main list item element
  • **f7-list-item-row** - list item row element for custom layout
  • **f7-list-item-cell** - list item cell element for custom layout

List Item Properties

Prop Type Default Description
<f7-list-item> properties
--- --- --- ---
title string List item title
subtitle string List item subtitle (only for Media List)
text string List item text (only for Media List)
header string List item header text
footer string List item footer text
media string List item media image URL
after string List item label
badge string number List item Badge
badge-color string List item Badge color. One of the default colors
media-item boolean Enables Media list item for the current list item
divider boolean Converts list item to list item divider
group-title boolean Converts list item to list group title
no-fast-click boolean Disables fast click
target boolean List item link target attribute
no-chevron boolean false Removes “chevron” icon on list item link
chevron-center boolean false Sets “chevron” icon on media list item on center (vertically)
tooltip string List button tooltip text to show on button hover/press
<f7-list-item> Form inputs specific properties
inline-label boolean false Enables inline-styled labels for Form Inputs. By default inherirt inline-labels prop on parent <f7-list>
item-input boolean false Enables additional styling for Form Inputs inside. By default will try to detect based on content
item-input-with-info boolean false Enables additional styling for Form Inputs with additional info. By default will try to detect based on content
<f7-list-item> Swipeout specific properties
swipeout boolean Converts list item to swipeout list item
swipeout-opened boolean Defines whether swipe actions should be opened or not. Note, only one swipeout item can be opened at same time
<f7-list-item> Accordion specific properties
accordion-item boolean false Converts list item to accordion list item
accordion-item-opened boolean false Makes accordion item opened
<f7-list-item> Sortable List specific properties
sortable boolean Allows to disable (when false) sorting of specific list item. Note, that it makes sense and work only on first or last items in the list and won’t work correctly if you disable sortable for some of the items in the middle.
<f7-list-item> Virtual List specific properties
virtual-list-index number Allows to pass list item index (from whole collection) when used in Virtual List. Useful to be used together with Sortable to know correct changed indexes
<f7-list-item> Smart Select specific properties
smart-select boolean false Enables Smart Select behavior
smart-select-params object Object with Smart Select Parameters
<f7-list-item> Checkboxes & Radios specific properties
checkbox boolean false Enables checkbox-item
radio boolean false Enables radio-item
checked boolean false Whether the checkbox/radio input is checked
indeterminate boolean Defines whether the checkbox input is in indeterminate state or not
name string Checkbox/radio input name
value string number Checkbox/radio input value
readonly boolean false Whether the checkbox/radio input is readonly
disabled boolean false Whether the checkbox/radio input is disabled
required boolean false Whether the checkbox/radio input is required
<f7-list-item> navigation/router related properties
link boolean string Enables link and link URL if specified as string. Same as href prop
href string boolean # URL of the page to load. In case of boolean href=”false” it won’t add href tag
target string Value of link target attribute, e.g. _blank, _self, etc.
view string CSS selector of the View to load the page
external boolean Enable to bypass Framework7’s link click handler
back boolean Enables back navigation link
force boolean Force page to load and ignore previous page in history (use together with back prop)
reload-current boolean Reloads new page instead of the currently active one
reload-previous boolean Replace the previous page in history with the new one from route
reload-all boolean Load new page and remove all previous pages from history and DOM
reload-detail boolean Reload Detail page in Master Detail view
animate boolean Disables pages animation
ignore-cache boolean Ignores caching
route-tab-id string Routable Tab id
route-props object Object with additional props that will be passed to target route component
prevent-router boolean false If set, then it won’t be processed by Framework7 router
<f7-list-item> action related properties
panel-open string boolean Defines panel to open. Can be left or right
panel-close boolean Closes panel on click
panel-toggle boolean Toggle (open/close) panel on click
actions-open string boolean CSS selector of the action sheet to open on click
actions-close string boolean CSS selector of the action sheet to close on click. Or boolean property to close currently opened action sheet
popup-open string boolean CSS selector of the popup to open on click
popup-close string boolean CSS selector of the popup to close on click. Or boolean property to close currently opened popup
popover-open string boolean CSS selector of the popover to open on click
popover-close string boolean CSS selector of the popover to close on click. Or boolean property to close currently opened popover
sheet-open string boolean CSS selector of the sheet modal to open on click
sheet-close string boolean CSS selector of the sheet modal to close on click. Or boolean property to close currently opened sheet modal
login-screen-open string boolean CSS selector of the login screen to open on click
login-screen-close string boolean CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen
sortable-enable string boolean CSS selector of the Sortable list to open on click
sortable-disable string boolean CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list
sortable-toggle string boolean CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list
searchbar-enable string boolean CSS selector of the Expandable Searchbar to be enabled on click. Or boolean property to enable the first found Searchbar
searchbar-disable string boolean CSS selector of the Expandable Searchbar to be disabled on click. Or boolean property to disable the first found Searchbar
searchbar-toggle string boolean CSS selector of the Expandable Searchbar to toggle on click. Or boolean property to toggle the first found Searchbar
searchbar-clear string boolean CSS selector of the Expandable Searchbar to clear on click. Or boolean property to clear the first found Searchbar
card-open string boolean CSS selector of the expandable card to open on click. Or boolean to open first found expandable card
card-close string boolean CSS selector of the expandable card to close on click. Or boolean property to close currently opened expandable card
card-prevent-open boolean Click on element with this prop won’t open its parent expandable card
menu-close boolean Closes Menu dropdown on click

List Item Events

Event Description
<f7-list-item> events
--- ---
click Event will be triggeres when user clicks on list item
change Event will be triggeres when “change” event occurs on list item input (radio or checkbox)
swipeout Event will be triggered while you move swipeout element. event.detail.progress contains current opened progress percentage
swipeout:open Event will be triggered when swipeout element starts its opening animation
swipeout:opened Event will be triggered after swipeout element completes its opening animation
swipeout:close Event will be triggered when swipeout element starts its closing animation
swipeout:closed Event will be triggered after swipeout element completes its closing animation
swipeout:delete Event will be triggered after swipeout element starts its delete animation
swipeout:deleted Event will be triggered after swipeout element completes its delete animation right before it will be removed from DOM
accordion:beforeopen Event will be triggered right before accordion content starts its opening animation. event.detail.prevent contains function that will prevent accordion from opening when called
accordion:open Event will be triggered when accordion content starts its opening animation.
accordion:opened Event will be triggered after accordion content completes its opening animation.
accordion:beforeclose Event will be triggered right before accordion content starts its closing animation. event.detail.prevent contains function that will prevent accordion from closing when called
accordion:close Event will be triggered when accordion content starts its closing animation.
accordion:closed Event will be triggered after accordion content completes its closing animation.

List Item Slots

List Item Vue component (<f7-list-item>) has additional slots for custom elements:

  • **root-start** - element will be inserted in the beginning of <li> element
  • **root** / **root-end** - element will be inserted in the end of <li> element
  • **content-start** - element will be inserted in the beginning of <div class="item-content"> element
  • **content** / **content-end** - element will be inserted in the end of <div class="item-content"> element
  • **inner-start** - element will be inserted in the beginning of <div class="item-inner"> element
  • **default** / **inner** / **inner-end** - element will be inserted in the end of <div class="item-inner"> element
  • **media** - element will be inserted inside of <div class="item-media"> element
  • **before-title** - element will be inserted before <div class="item-title"> element
  • **title** - element will be inserted inside of <div class="item-title"> element
  • **after-title** - element will be inserted after <div class="item-title"> element
  • **subtitle** - element will be inserted inside of <div class="item-subtitle"> element
  • **text** - element will be inserted inside of <div class="item-text"> element
  • **header** - element will be inserted inside of <div class="item-header"> element
  • **footer** - element will be inserted inside of <div class="item-footer"> element
  • **after-start** - element will be inserted in the beginning of <div class="item-after"> element
  • **after** / **after-end** - element will be inserted in the end of <div class="item-after"> element
1. <f7-list media-list>
2. <f7-list-item
3. link="/home/"
4. title="Item Title"
5. subtitle="Item Subtitle"
6. text="Text"
7. after="Read more"
8. >
9. <img src="path-to-my-image.jpg" slot="media">
10. <div slot="root-start">Root Start</div>
11. <div slot="root">Root End</div>
12. <div slot="content-start">Content Start</div>
13. <div slot="content">Content End</div>
14. <div slot="media-start">Media Start</div>
15. <div slot="media">Media</div>
16. <span slot="after-start">After Start</span>
17. <span slot="after">After End</span>
18. <div slot="inner-start">Inner Start</div>
19. <div slot="inner">Inner End</div>
20. <div slot="before-title">Before Title</div>
21. <div slot="after-title">After Title</div>
22. </f7-list-item>
23. </f7-list>

25. <!-- Renders to: -->

27. <div class="list media-list">
28. <ul>
29. <li>
30. <div>Root Start</div>
31. <a href="/home/" class="item-link">
32. <div class="item-content">
33. <div>Content Start</div>
34. <div class="item-media">
35. <img src="path-to-my-image.jpg">
36. </div>
37. <div class="item-inner">
38. <div>Inner Start</div>
39. <div class="item-title-row">
40. <div>Before Title</div>
41. <div class="item-title">Item Title</div>
42. <div>After Title</div>
43. <div class="item-after">
44. <span>After Start</span>
45. <span>Read more</span>
46. <span>After End</span>
47. </div>
48. </div>
49. <div class="item-subtitle">Item Subtitle</div>
50. <div class="item-text">Text</div>
51. <div>Inner End</div>
52. </div>
53. <div>Content End</div>
54. </div>
55. </a>
56. <div>Root End</div>
57. </li>
58. </ul>
59. </div>

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 tablet-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>