List React 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 React component represents Framework7's List View component.

Usage examples

Minimal Layout

<List>
  <ListItem title="Item 1"></ListItem>
  <ListItem title="Item 2"></ListItem>
</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

<List>
  <ListGroup>
    <ListItem title="Group 1" groupTitle></ListItem>
    <ListItem title="Item 1"></ListItem>
    <ListItem title="Item 2"></ListItem>
  </ListGroup>
  <ListGroup>
    <ListItem title="Group 2" groupTitle></ListItem>
    <ListItem title="Item 1"></ListItem>
    <ListItem title="Item 2"></ListItem>
  </ListGroup>
</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

<List mediaList>
  <ListItem title="Item 1" subtitle="Subtitle 1" text="Item 1 Text"></ListItem>
  <ListItem title="Item 1" subtitle="Subtitle 2" text="Item 2 Text"></ListItem>
</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

<List>
  <ListItem title="Item 1"></ListItem>
  <ListItem title="Item 2"></ListItem>
  <ListLabel>List Label</ListLabel>
</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
<List> properties
inset boolean Makes list block inset
tabletInset boolean Makes block inset on tablets, but not on phones
mediaList 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>
storeData boolean Enables form storage for the current form
noHairlines boolean Removes outer hairlines.
noHairlinesBetween 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
<List> Virtual List specific Properties
virtual boolean Enables Virtual List
virtualInit boolean true Initializes Virtual List
virtualItems array/object Array with list items
virtualHeight number/function If number - item height in px. If function then function should return item height
virtualRowsBefore 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
virtualRowsAfter 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
virtualCols number 1 Number of items per row. Doesn't compatible when using Virtual List with dynamic height
virtualCache 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
virtualFilteredOnly boolean false Option to show filtered items only set by `filter()` method
virtualSearchByItem 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
virtualSearchAll 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
virtualRenderItem function(index, item) This optional function allows to use custom function to render item HTML. It could be used instead of template parameter
virtualEmptyTemplate string Specify list item template when empty data is passed

Event Properties

Event Description
onSortableOpen Event will be triggered when sortable mode is enabled
onSortableClose Event will be triggered when sortable mode is disabled
onSortableSort 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
onTabShow Event will be triggered when List Block-Tab becomes visible/active
onTabHide 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.