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>