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.