Get Started
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List

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
<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
<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> 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
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
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
animate	boolean		Disables pages animation
ignore-cache	boolean		Ignores caching
page-name	string		Name of the page to load
route-tab-id	string		Routable Tab id

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

<f7-list media-list>
  <f7-list-item
    link="/home/"
    title="Item Title"
    subtitle="Item Subtitle"
    text="Text"
    after="Read more"
    >
      <img src="path-to-my-image.jpg" slot="media">
      <div slot="root-start">Root Start</div>
      <div slot="root">Root End</div>
      <div slot="content-start">Content Start</div>
      <div slot="content">Content End</div>
      <div slot="media-start">Media Start</div>
      <div slot="media">Media</div>
      <span slot="after-start">After Start</span>
      <span slot="after">After End</span>
      <div slot="inner-start">Inner Start</div>
      <div slot="inner">Inner End</div>
      <div slot="before-title">Before Title</div>
      <div slot="after-title">After Title</div>
  </f7-list-item>
</f7-list>

<!-- Renders to: -->

<div class="list media-list">
  <ul>
    <li>
      <div>Root Start</div>
      <a href="/home/" class="item-link">
        <div class="item-content">
          <div>Content Start</div>
          <div class="item-media">
            <img src="path-to-my-image.jpg">
          </div>
          <div class="item-inner">
            <div>Inner Start</div>
            <div class="item-title-row">
              <div>Before Title</div>
              <div class="item-title">Item Title</div>
              <div>After Title</div>
              <div class="item-after">
                <span>After Start</span>
                <span>Read more</span>
                <span>After End</span>
              </div>
            </div>
            <div class="item-subtitle">Item Subtitle</div>
            <div class="item-text">Text</div>
            <div>Inner End</div>
          </div>
          <div>Content End</div>
        </div>
      </a>
      <div>Root End</div>
    </li>
  </ul>
</div>

Examples

Minimal Layout

<f7-list>
  <f7-list-item title="Item 1"></f7-list-item>
  <f7-list-item title="Item 2"></f7-list-item>
</f7-list>
<!-- Renders to: -->


<div class="list">
  <ul>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Item 1</div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Item 2</div>
      </div>
    </li>
  </ul>
</div>

With Badges And Divider

<f7-list>
  <f7-list-item title="Item 1" badge="5" badge-color="red"></f7-list-item>
  <f7-list-item title="Item 2" badge="3" badge-color="red"></f7-list-item>
  <f7-list-item title="Items Divider" divider></f7-list-item>
  <f7-list-item title="Item 3"></f7-list-item>
  ...
</f7-list>

<!-- Renders to: -->

<div class="list">
  <ul>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Item 1</div>
        <div class="item-after">
          <span class="badge color-red">5</span>
        </div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Item 2</div>
        <div class="item-after">
          <span class="badge color-red">3</span>
        </div>
      </div>
    </li>
    <li class="item-divider"><span>Items Divider</span></li>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Item 3</div>
      </div>
    </li>
  </ul>
</div>

Links Items

<f7-list>
  <f7-list-item link="/about/" title="About"></f7-list-item>
  <f7-list-item link="/contacts/" title="Contacts"></f7-list-item>
</f7-list>

<!-- Renders to: -->

<div class="list">
  <ul>
    <li>
      <a href="/about/" class="item-link">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">About</div>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="/contacts/" class="item-link">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Contacts</div>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

Media List Items

<f7-list media-list>
  <f7-list-item
    link="/item/"
    media="path/to/image.jpg"
    title="Item Title"
    subtitle="Item Subtitle"
    text="Some text"
    after="Read more"
  ></f7-list-item>
</f7-list>

<!-- Renders to: -->

<div class="list media-list">
  <ul>
    <li>
      <a href="/item/" class="item-link">
        <div class="item-content">
          <div class="item-media">
            <img src="path/to/image.jpg">
          </div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Item Title</div>
              <div class="item-after">Read more</div>
            </div>
            <div class="item-subtitle">Item Subtitle</div>
            <div class="item-text">Some text</div>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

Custom Table-like Elements

<f7-list-item>
  <f7-list-item-cell>
    <f7-list-item-row>
      <f7-list-item-cell>Cell 1-1</f7-list-item-cell>
      <f7-list-item-cell>Cell 1-2</f7-list-item-cell>
      <f7-list-item-cell>Cell 1-3</f7-list-item-cell>
    </f7-list-item-row>
    <f7-list-item-row>
      <f7-list-item-cell>Cell 2-1</f7-list-item-cell>
      <f7-list-item-cell>Cell 2-2</f7-list-item-cell>
    </f7-list-item-row>
    <f7-list-item-row>
      <f7-list-item-cell>Cell 3-1</f7-list-item-cell>
      <f7-list-item-cell>
        <f7-list-item-row>
          Cell 3-2
        </f7-list-item-row>
        <f7-list-item-row>
          Cell 3-3
        </f7-list-item-row>
      </f7-list-item-cell>
    </f7-list-item-row>
  </f7-list-item-cell>
</f7-list-item>