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>