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.