List Button React Component

List Button React component represents Framework7's List Block Button element. They are intended to be used inside of the List component.

Usage examples

Minimal Layout

<List>
  <ListButton>Button 1</ListButton>
  <ListButton>Button 2</ListButton>
</List>

Renders to:

<div class="list-block">
  <ul>
    <li>
      <a href="#" class="item-link list-button">Button 1</a>
    </li>
    <li>
      <a href="#" class="item-link list-button">Button 2</a>
    </li>
  </ul>
</div>

Colored Buttons

<List>
  <ListButton color="red">Red Button</ListButton>
  <ListButton color="green">Green Button</ListButton>
</List>

Control Buttons in Inset List

<List inset>
  <ListButton openPanel="left">Open Panel</ListButton>
  <ListButton openPopup="#myPopup">Open Popup</ListButton>
</List>

Properties

Prop	Type	Default	Description
title	string		Button inner text
color	string		Link color. One of default colors
Control Links
tabLink	string/boolean		Enables tab link and specify CSS selector of the target tab (if specified as a string)
openPanel	string/boolean		Defines panel to open. Can be "left" or "right"
closePanel	boolean		Closes panel on click
openPopup	string/boolean		CSS selector of the popup to open on click
closePopup	string/boolean		CSS selector of the popup to close on click. Or boolean property to close currently opened popup
openPopover	string/boolean		CSS selector of the popover to open on click
closePopover	string/boolean		CSS selector of the popover to close on click. Or boolean property to close currently opened popover
openPicker	string/boolean		CSS selector of the picker to open on click
closePicker	string/boolean		CSS selector of the picker to close on click. Or boolean property to close currently opened picker
openLoginScreen	string/boolean		CSS selector of the login screen to open on click
closeLoginScreen	string/boolean		CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen
openSortable	string/boolean		CSS selector of the Sortable list to open on click
closeSortable	string/boolean		CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list
toggleSortable	string/boolean		CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list
Navigation / Router Properties
href	string	#	URL of the page to load
view	string		CSS selector of the View to load the page
noFastClick	boolean		Disables fast click
external	boolean		Enable to bypass Framework7's link click handler
back	boolean		Enables back navigation link