List Vue Component

List views are versatile and powerful user interface compontents frequently found in iOS apps. A list view presents data in a scrollable list of multiple rows that may be divided into sections/groups.

List views have many purposes:

  • To let users navigate through hierarchically structured data
  • To present an indexed list of items
  • To display detail information and controls in visually distinct groupings
  • To present a selectable list of options

List Vue component represents Framework7's List View component.

List Components

There are following components included:

  • f7-list - main List View element
  • f7-list-group - list group element

List Properties

Prop Type Default Description
<f7-list> properties
inset boolean false Makes list block inset
tablet-inset boolean false Makes block inset on tablets, but not on phones
media-list boolean false Enables Media List
links-list boolean false Enables simplified Links List
simple-list boolean false Enables simplified Simple List
sortable boolean false Enables Sortable List
sortable-enabled boolean false Enables sorting on sortable list
accordion boolean false Enables Accordion List
contacts-list boolean false Enables Contacts List by adding required addional classes for styling
form boolean false Enables <form> tag on list block instead of <div>
form-store-data boolean false Enables form storage for the current form
inline-labels boolean false Enables inline-styled labels for Form Inputs
no-hairlines boolean false Removes outer hairlines
no-hairlines-md boolean false Removes outer hairlines for MD theme
no-hairlines-ios boolean false Removes outer hairlines for iOS theme
no-hairlines-between boolean false Removes inner hairlines between items
no-hairlines-between-md boolean false Removes inner hairlines between items for MD theme
no-hairlines-between-ios boolean false Removes inner hairlines between items for iOS theme
tab boolean false Adds additional "tab" class when block should be used as a Tab
tab-active boolean false Adds additional "tab-active" class when block used as a Tab and makes it active tab
virtual-list boolean false Enables Virtual List
virtual-list-params object Object with Virtual List Parameters

List Events

Event Description
<f7-list> events
tab:show Event will be triggered when List Block-Tab becomes visible/active
tab:hide Event will be triggered when List Block-Tab becomes invisible/inactive
<f7-list> Sortable specific events
sortable:enable Event will be triggered when sortable mode is enabled
sortable:disable Event will be triggered when sortable mode is disabled
sortable:sort Event will be triggered after user release currently sorting element in new position. event.detail will contain object with from and to properties with start/new index numbers of sorted list item
<f7-list> Virtual List specific events
virtual:itembeforeinsert Event will be triggered before item will be added to virtual document fragment
virtual:itemsbeforeinsert Event will be triggered after current DOM list will be removed and before new document will be inserted
virtual:itemsafterinsert Event will be triggered after new document fragment with items inserted
virtual:beforeclear Event will be triggered before current DOM list will be removed and replaced with new document fragment

List View Slots

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

  • before-list - element will be inserted in the beginning of list view and right before <ul> main list
  • after-list - element will be inserted in the end of list view and right after <ul> main list
  • list - element will be inserted inside of <ul> main list element

Virtual List

For Virtual List usage and examples check the Virtual List Vue Component documentation.

Sortable List

For Sortable List usage and examples check the Sortable Vue Component documentation.

Accordion List

For Accordion List usage and examples check the Accordion Vue Component documentation.

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 Groups

<f7-list>
  <f7-list-group>
    <f7-list-item title="Group 1" group-title></f7-list-item>
    <f7-list-item title="Item 1"></f7-list-item>
    <f7-list-item title="Item 2"></f7-list-item>
  </f7-list-group>
  <f7-list-group>
    <f7-list-item title="Group 2" group-title></f7-list-item>
    <f7-list-item title="Item 1"></f7-list-item>
    <f7-list-item title="Item 2"></f7-list-item>
  </f7-list-group>
</f7-list>

Renders to:

<div class="list">
  <div class="list-group">
    <ul>
      <li class="list-group-title"><span>Group 1</span></li>
      <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>
  <div class="list-group">
    <ul>
      <li class="list-group-title"><span>Group 2</span></li>
      ...
    </ul>
  </div>
</div>

Media List

<f7-list media-list>
  <f7-list-item title="Item 1" subtitle="Subtitle 1" text="Item 1 Text"></f7-list-item>
  <f7-list-item title="Item 1" subtitle="Subtitle 2" text="Item 2 Text"></f7-list-item>
</f7-list>

Renders to:

<div class="list media-list">
  <ul>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title-row">
          <div class="item-title">Item 1</div>
        </div>
        <div class="item-subtitle">Subtitle 1</div>
        <div class="item-text">Item 1 Text</div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title-row">
          <div class="item-title">Item 1</div>
        </div>
        <div class="item-subtitle">Subtitle 1</div>
        <div class="item-text">Item 1 Text</div>
      </div>
    </li>
  </ul>
</div>

With Block Footer

<f7-list>
  <f7-list-item title="Item 1"></f7-list-item>
  <f7-list-item title="Item 2"></f7-list-item>
  <f7-block-footer>List Footer</f7-block-footer>
</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 class="block-footer">List Footer</div>
</div>