Get Started
Vue Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
- Forms
  - Checkboxes & Radios
  - Form Elements
  - Smart Select
- Icon
- Grid / Layout Grid
- Lists
  - List
  - List Item
  - List Button
  - Accordion List
  - Contacts List
  - Sortable List
  - Swipeout List
  - Virtual List
- Link
- Messages
- Message Bar
- Modals
  - Action Sheet
  - Login Screen
  - Picker Modal
  - Popover
  - Popup
- Navigation Bars
  - Navbar
  - Toolbar/Tabbar
  - Sub Navbar
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View

List Item Vue Component

Usage 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-block">
  <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-block">
  <ul>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Item 1</div>
        <div class="item-after">
          <span class="badge bg-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 bg-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-block">
  <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="<img src='image.jpg'>"
    title="Item Title"
    subtitle="Item Subtitle"
    text="Some text"
    after="Read more"
  ></f7-list-item>
</f7-list>

Renders to:

<div class="list-block media-list">
  <ul>
    <li>
      <a href="/item/" class="item-link">
        <div class="item-content">
          <div class="item-media">
            <img src='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>

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 - 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 - element will be inserted in the end of <div class="item-content"> element
media-start - element will be inserted in the beginning of <div class="item-media"> element
media - element will be inserted in the end of <div class="item-media"> element
inner-start - element will be inserted in the beginning of <div class="item-inner"> element
inner/default - element will be inserted in the end of <div class="item-inner"> element

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

Renders to:

<div class="list-block 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">
            <div>Media Start</div>
            <img src="image.jpg">
            <div>Media</div>
          </div>
          <div class="item-inner">
            <div>Inner Start</div>
            <div class="item-title-row">
              <div class="item-title">Item Title</div>
              <div class="item-after">
                <span>After Start</span>
                <span>Read more</span>
                <span>After</span>
              </div>
            </div>
            <div class="item-subtitle">Item Subtitle</div>
            <div class="item-text">Text</div>
            <div>Inner</div>
          </div>
          <div>Content</div>
        </div>
      </a>
      <div>Root</div>
    </li>
  </ul>
</div>

Properties

Prop	Type	Default	Description
title	string		List item title
subtitle	string		List item subtitle (only for Media List)
text	string		List item text (only for Media List)
media	string		List item media (icon, image, etc)
after	string		List item label
badge	string/number		List item Badge
badge-color	string		List item Badge color. One of 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
swipeout	boolean		Converts list item to swipeout list item
accordion-item	boolean		Converts list item to accordion list item
Smart Select properties
smart-select	boolean		Converts list item to smart select list item
smart-select-searchbar	boolean		Enables search bar for smart select page
smart-select-searchnar-placeholder	string	"Search"	Smart select search bar search field placeholder text
smart-select-searchbar-cancel	string	"Cancel"	Smart select search bar Cancel button text
smart-select-page-title	string		Smart select page title. Defaults to `title` prop
smart-select-back-text	boolean	"Back"	Smart select page back-link text.
smart-select-back-on-select	boolean		Will close Smart Select page automatically after user selects any option
smart-select-open-in	string	"page"	Defines how to open smart select: "page", "popup" or "picker"
smart-select-virtual-list	boolean		Enables Virtual list for smart select
smart-select-virtual-list-height	number		Allows to specify virtual list item height
smart-select-navbar-theme	string		Smart select navbar color theme. One of default colors
smart-select-form-theme	string		Smart select form color theme. One of default colors
Checkboxes & Radios properties
checkbox	boolean		Enables checkbox-item
radio	boolean		Enables radio-item
checked	boolean		Whether the checkbox/radio input is checked
name	string		Checkbox/radio input name
value	string/number		Checkbox/radio input value
readonly	boolean		Whether the checkbox/radio input is readonly
disabled	boolean		Whether the checkbox/radio input is disabled
required	boolean		Whether the checkbox/radio input is required
Link properties
link	boolean/string		Enables link and link URL if specified as string
link-open-panel	string/boolean		Defines panel to open. Can be "left" or "right"
link-close-panel	boolean		Closes panel on click
link-open-popup	string/boolean		CSS selector of the popup to open on click
link-close-popup	string/boolean		CSS selector of the popup to close on click. Or boolean property to close currently opened popup
link-open-popover	string/boolean		CSS selector of the popover to open on click
link-close-popover	string/boolean		CSS selector of the popover to close on click. Or boolean property to close currently opened popover
link-open-picker	string/boolean		CSS selector of the picker to open on click
link-close-picker	string/boolean		CSS selector of the picker to close on click. Or boolean property to close currently opened picker
link-open-login-screen	string/boolean		CSS selector of the login screen to open on click
link-close-login-screen	string/boolean		CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen
link-view	string		CSS selector of the View to load the page
link-no-fastclick	boolean		Disables fast click
link-external	boolean		Enable to bypass Framework7's link click handler
link-back	boolean		Enables back navigation link
link-force	boolean		Force page to load and ignore previous page in history (use together with back prop)
link-reload	boolean		Reloads new page instead of the currently active one
link-animate-pages	boolean		Disables pages animation
link-ignore-cache	boolean		Ignores caching
link-page-name	string		Name of the page to load
link-template	string		Template name to load

Events

Event	Description
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.