Get Started
Vue Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
- Forms
  - Checkboxes & Radios
  - Form Elements
  - Smart Select
- Icon
- Grid / Layout Grid
- Lists
  - List
  - List Item
  - List Button
  - Accordion List
  - Contacts List
  - Sortable List
  - Swipeout List
  - Virtual List
- Link
- Messages
- Message Bar
- Modals
  - Action Sheet
  - Login Screen
  - Picker Modal
  - Popover
  - Popup
- Navigation Bars
  - Navbar
  - Toolbar/Tabbar
  - Sub Navbar
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View

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