List Item React 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 Badges And Divider

<List>
  <ListItem title="Item 1" badge="5" badgeColor="red"></ListItem>
  <ListItem title="Item 2" badge="3" badgeColor="red"></ListItem>
  <ListItem title="Items Divider" divider></ListItem>
  <ListItem title="Item 3"></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 class="item-after">
          <span class="badge bg-red">5</span>
        </div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Item 2</div>
        <div class="item-after">
          <span class="badge bg-red">3</span>
        </div>
      </div>
    </li>
    <li class="item-divider"><span>Items Divider</span></li>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Item 3</div>
      </div>
    </li>
  </ul>
</div>

Links Items

<List>
  <ListItem link="/about/" title="About"></ListItem>
  <ListItem link="/contacts/" title="Contacts"></ListItem>
</List>

Renders to:

<div class="list-block">
  <ul>
    <li>
      <a href="/about/" class="item-link">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">About</div>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="/contacts/" class="item-link">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Contacts</div>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

Media List Items

<List mediaList>
  <ListItem
    link="/item/"
    media="<img src='image.jpg'>"
    title="Item Title"
    subtitle="Item Subtitle"
    text="Some text"
    after="Read more"
  ></ListItem>
</List>

Renders to:

<div class="list-block media-list">
  <ul>
    <li>
      <a href="/item/" class="item-link">
        <div class="item-content">
          <div class="item-media">
            <img src='image.jpg'>
          </div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Item Title</div>
              <div class="item-after">Read more</div>
            </div>
            <div class="item-subtitle">Item Subtitle</div>
            <div class="item-text">Some text</div>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

Slot Properties

List Item React component (<ListItem>) has additional slot properties for custom elements:

• rootStartSlot - element will be inserted in the beginning of <li> element
• rootSlot - element will be inserted in the end of <li> element
• contentStartSlot - element will be inserted in the beginning of <div class="item-content"> element
• contentSlot - element will be inserted in the end of <div class="item-content"> element
• mediaStartSlot - element will be inserted in the beginning of <div class="item-media"> element
• mediaSlot - element will be inserted in the end of <div class="item-media"> element
• innerStartSlot - element will be inserted in the beginning of <div class="item-inner"> element
• innerSlot - element will be inserted in the end of <div class="item-inner"> element

<List mediaList>
  <ListItem
    link="/home/"
    media="<img src='image.jpg'>"
    title="Item Title"
    subtitle="Item Subtitle"
    text="Text"
    after="Read more"

    rootStartSlot={<div>Root Start</div>}
    rootSlot={<div>Root</div>}
    contentStartSlot={<div>Content Start</div>}
    contentSlot={<div>Content</div>}
    mediaStartSlot={<div>Media Start</div>}
    mediaSlot={<div>Media</div>}
    afterStartSlot={<span>After Start</span>}
    afterSlot={<span>After</span>}
    innerStartSlot={<div>Inner Start</div>}
    innerSlot={<div>Inner</div>}
  >
  </ListItem>
</List>

Renders to:

<div class="list-block media-list">
  <ul>
    <li>
      <div>Root Start</div>
      <a href="/home/" class="item-link">
        <div class="item-content">
          <div>Content Start</div>
          <div class="item-media">
            <div>Media Start</div>
            <img src="image.jpg">
            <div>Media</div>
          </div>
          <div class="item-inner">
            <div>Inner Start</div>
            <div class="item-title-row">
              <div class="item-title">Item Title</div>
              <div class="item-after">
                <span>After Start</span>
                <span>Read more</span>
                <span>After</span>
              </div>
            </div>
            <div class="item-subtitle">Item Subtitle</div>
            <div class="item-text">Text</div>
            <div>Inner</div>
          </div>
          <div>Content</div>
        </div>
      </a>
      <div>Root</div>
    </li>
  </ul>
</div>

Properties

Prop	Type	Default	Description
title	string		List item title
subtitle	string		List item subtitle (only for Media List)
text	string		List item text (only for Media List)
media	string		List item media (icon, image, etc)
after	string		List item label
badge	string/number		List item Badge
badgeColor	string		List item Badge color. One of default colors
mediaItem	boolean		Enables Media list item for the current list item
divider	boolean		Converts list item to list item divider
groupTitle	boolean		Converts list item to list group title
swipeout	boolean		Converts list item to swipeout list item
accordionItem	boolean		Converts list item to accordion list item
Smart Select properties
smartSelect	boolean		Converts list item to smart select list item
smartSelectSearchbar	boolean		Enables search bar for smart select page
smartSelectSearchnarPlaceholder	string	"Search"	Smart select search bar search field placeholder text
smartSelectSearchbarCancel	string	"Cancel"	Smart select search bar Cancel button text
smartSelectPageTitle	string		Smart select page title. Defaults to title prop
smartSelectBackText	boolean	"Back"	Smart select page back-link text.
smartSelectBackOnSelect	boolean		Will close Smart Select page automatically after user selects any option
smartSelectOpenIn	string	"page"	Defines how to open smart select: "page", "popup" or "picker"
smartSelectVirtualList	boolean		Enables Virtual list for smart select
smartSelectVirtualListHeight	number		Allows to specify virtual list item height
smartSelectNavbarTheme	string		Smart select navbar color theme. One of default colors
smartSelectFormTheme	string		Smart select form color theme. One of default colors
Checkboxes & Radios properties
checkbox	boolean		Enables checkbox-item
radio	boolean		Enables radio-item
checked	boolean		Whether the checkbox/radio input is checked
name	string		Checkbox/radio input name
value	string/number		Checkbox/radio input value
readonly	boolean		Whether the checkbox/radio input is readonly
disabled	boolean		Whether the checkbox/radio input is disabled
required	boolean		Whether the checkbox/radio input is required
Link properties
link	boolean/string		Enables link and link URL if specified as string
linkOpenPanel	string/boolean		Defines panel to open. Can be "left" or "right"
linkClosePanel	boolean		Closes panel on click
linkOpenPopup	string/boolean		CSS selector of the popup to open on click
linkClosePopup	string/boolean		CSS selector of the popup to close on click. Or boolean property to close currently opened popup
linkOpenPopover	string/boolean		CSS selector of the popover to open on click
linkClosePopover	string/boolean		CSS selector of the popover to close on click. Or boolean property to close currently opened popover
linkOpenPicker	string/boolean		CSS selector of the picker to open on click
linkClosePicker	string/boolean		CSS selector of the picker to close on click. Or boolean property to close currently opened picker
linkOpenLoginScreen	string/boolean		CSS selector of the login screen to open on click
linkCloseLoginScreen	string/boolean		CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen
linkView	string		CSS selector of the View to load the page
linkNoFastclick	boolean		Disables fast click
linkExternal	boolean		Enable to bypass Framework7's link click handler
linkBack	boolean		Enables back navigation link
linkForce	boolean		Force page to load and ignore previous page in history (use together with back prop)
linkReload	boolean		Reloads new page instead of the currently active one
linkAnimatePages	boolean		Disables pages animation
linkIgnoreCache	boolean		Ignores caching
linkPageName	string		Name of the page to load
linkTemplate	string		Template name to load

Event Properties

Event	Description
onClick	Event will be triggeres when user clicks on list item
onChange	Event will be triggeres when "change" event occurs on list item input (radio or checkbox)
onSwipeout	Event will be triggered while you move swipeout element. event.detail.progress contains current opened progress percentage
onSwipeoutOpen	Event will be triggered when swipeout element starts its opening animation
onSwipeoutOpened	Event will be triggered after swipeout element completes its opening animation
onSwipeoutClose	Event will be triggered when swipeout element starts its closing animation
onSwipeoutClosed	Event will be triggered after swipeout element completes its closing animation
onSwipeoutDelete	Event will be triggered after swipeout element starts its delete animation
onSwipeoutDeleted	Event will be triggered after swipeout element completes its delete animation right before it will be removed from DOM
onAccordionOpen	Event will be triggered when accordion content starts its opening animation.
onAccordionOpened	Event will be triggered after accordion content completes its opening animation.
onAccordionClose	Event will be triggered when accordion content starts its closing animation.
onAccordionClosed	Event will be triggered after accordion content completes its closing animation.