List Button Vue Component

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

Usage examples

Minimal Layout

<f7-list>
  <f7-list-button>Button 1</f7-list-button>
  <f7-list-button>Button 2</f7-list-button>
</f7-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

<f7-list>
  <f7-list-button color="red">Red Button</f7-list-button>
  <f7-list-button color="green">Green Button</f7-list-button>
</f7-list>

Control Buttons in Inset List

<f7-list inset>
  <f7-list-button open-panel="left">Open Panel</f7-list-button>
  <f7-list-button open-popup="#my-popup">Open Popup</f7-list-button>
</f7-list>

Properties

Prop Type Default Description
title string Button inner text
color string Link color. One of default colors
Control Links
tab-link string/boolean Enables tab link and specify CSS selector of the target tab (if specified as a string)
open-panel string/boolean Defines panel to open. Can be "left" or "right"
close-panel boolean Closes panel on click
open-popup string/boolean CSS selector of the popup to open on click
close-popup string/boolean CSS selector of the popup to close on click. Or boolean property to close currently opened popup
open-popover string/boolean CSS selector of the popover to open on click
close-popover string/boolean CSS selector of the popover to close on click. Or boolean property to close currently opened popover
open-picker string/boolean CSS selector of the picker to open on click
close-picker string/boolean CSS selector of the picker to close on click. Or boolean property to close currently opened picker
open-login-screen string/boolean CSS selector of the login screen to open on click
close-login-screen string/boolean CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen
open-sortable string/boolean CSS selector of the Sortable list to open on click
close-sortable string/boolean CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list
toggle-sortable 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
no-fast-click boolean Disables fast click
external boolean Enable to bypass Framework7's link click handler
back boolean Enables back navigation link