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.