Language: ENCN

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.

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 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-block">
  <div class="list-block-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-block-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-block 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 Label

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

Properties

Prop Type Default Description
<f7-list> properties
inset boolean Makes list block inset
media-list boolean Enables Media List
grouped boolean Enable if you want to use list groups inside
sortable boolean Enables Sortable List
accordion boolean Enables Accordion List
contacts boolean Enables Contacts List by adding required addional classes for styling
form boolean Enables <form> tag on list block instead of <div>
no-hairlines boolean Removes outer hairlines.
no-hairlines-between boolean Removes inner hairlines.
tab boolean Adds additional "tab" class when block should be used as a Tab
active boolean Adds additional "active" class when block used as a Tab and makes it active tab
<f7-list> Virtual List specific Properties
virtual boolean Enables Virtual List
virtual-init boolean true Initializes Virtual List
virtual-items array/object Array with list items
virtual-height number/function If number - item height in px. If function then function should return item height
virtual-rows-before number Amount of rows (items) to be rendered before current screen scroll position. By default it is equal to double amount of rows (items) that fit to screen
virtual-rows-after number Amount of rows (items) to be rendered after current screen scroll position. By default it is equal to the amount of rows (items) that fit to screen
virtual-cols number 1 Number of items per row. Doesn't compatible when using Virtual List with dynamic height
virtual-cache boolean true Disable or enable DOM cache for already rendered list items. In this case each item will be rendered only once and all futher manipulations will be with DOM element. It is useful if your list items have some user interaction elements (like form elements or swipe outs) or could be modified
virtual-filtered-only boolean false Option to show filtered items only set by `filter()` method
virtual-search-by-item function(query, index, item) Search function that will be used by Search Bar, it receives search query, item index and item itself. If item matches to search query you need to return true, otherwise this function should return false
virtual-search-all function(query, items) Search function that will be used by Search Bar, it receives search query and array with all items. You need to loop through items and return array with indexes of matched items
virtual-render-item function(index, item) This optional function allows to use custom function to render item HTML. It could be used instead of template parameter

Events

Event Description
sortable:open Event will be triggered when sortable mode is enabled
sortable:close 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 startIndex and newIndex properties with start/new index numbers of sorted list item
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

Access To Virtual List Initialized Instance

If you use automatic initalization to init the Virtual List (with virtual-init:true prop) and need to use its Methods and Properties you can access its initialized instance by accessing .f7VirtualList component's property.