Toolbar Vue Component

Toolbar is a fixed (with Fixed and Through layout types) area at the bottom of a screen that contains navigation elements. Toolbar does not have any parts, just plain links inside

Toolbar Vue component represents Toolbar component.

Toolbar Components

There are following components included:

• f7-toolbar

Toolbar Properties

Prop	Type	Default	Description
<f7-toolbar> properties
inner	boolean	true	When enabled (by default), it will put all the content within internal `toolbar-inner` element. Disable it only in case you want to put totally custom layout inside
bottom-md	boolean	false	Defines whether the Toolbar should be on bottom or not (MD theme only)
tabbar	boolean	false	Defines whether the Toolbar is also a Tabbar or not
labels	boolean	false	Enables Tabbar with labels (affects only when tabbar: true)
scrollable	boolean	false	Enables scrollable Tabbar (affects only when tabbar: true)
no-shadow	boolean		Disable shadow rendering for Material theme
no-hairline	boolean	false	Disable toolbar/tabbar top thin border (hairline) for iOS theme
hidden	boolean	false	Makes toolbar hidden

Toolbar Methods

	<f7-toolbar> methods
.hide(animate)	Hide toolbar
.show(animate)	Show toolbar

Toolbar Slots

Toolbar Vue component (<f7-toolbar>) has additional slots for custom elements:

• default - element will be inserted as a child of <div class="toolbar-inner"> element
• before-inner - element will be inserted right before <div class="toolbar-inner"> element
• after-inner - element will be inserted right after <div class="toolbar-inner"> element

<f7-toolbar>
  <div slot="before-inner">Before Inner</div>
  <div slot="after-inner">After Inner</div>
  <!-- Goes to default slot: -->
  <f7-link>Left Link</f7-link>
  <f7-link>Right Link</f7-link>
</f7-toolbar>

<!-- Renders to: -->

<div class="toolbar">
  <div>Before Inner</div>
  <div class="toolbar-inner">
    <a href="#" class="link">Left Link</a>
    <a href="#" class="link">Right Link</a>
  </div>
  <div>After Inner</div>
</div>

Examples

<f7-toolbar>
  <f7-link>Left Link</f7-link>
  <f7-link>Right Link</f7-link>
</f7-toolbar>

<!-- Renders to: -->

<div class="toolbar">
  <div class="toolbar-inner">
    <a href="#" class="link">Left Link</a>
    <a href="#" class="link">Right Link</a>
  </div>
</div>

Bottom Toolbar (Affects MD Theme only)

<f7-toolbar bottom-md>
  <f7-link>Left Link</f7-link>
  <f7-link>Right Link</f7-link>
</f7-toolbar>

<!-- Renders to: -->

<div class="toolbar toolbar-bottom-md">
  <div class="toolbar-inner">
    <a href="#" class="link">Left Link</a>
    <a href="#" class="link">Right Link</a>
  </div>
</div>

Tabbar

<f7-toolbar tabbar>
  <f7-link tab-link="#tab1">Tab 1</f7-link>
  <f7-link tab-link="#tab2">Tab 2</f7-link>
</f7-toolbar>

<!-- Renders to: -->

<div class="toolbar tabbar">
  <div class="toolbar-inner">
    <a href="#" class="tab-link" data-tab="#tab1">Tab 1</a>
    <a href="#" class="tab-link" data-tab="#tab2">Tab 2</a>
  </div>
</div>

Tabbar With Labels

<f7-toolbar tabbar labels>
  <f7-link icon="icon-1" text="Tab 1" tab-link="#tab1"></f7-link>
  <f7-link icon="icon-2" text="Tab 2" tab-link="#tab2"></f7-link>
</f7-toolbar>

<!-- Renders to: -->

<div class="toolbar tabbar tabbar-labels">
  <div class="toolbar-inner">
    <a href="#" class="tab-link" data-tab="#tab1">
      <i class="icon icon-1"></i>
      <span class="tabbar-label">Tab 1</span>
    </a>
    <a href="#" class="tab-link" data-tab="#tab1">
      <i class="icon icon-2"></i>
      <span class="tabbar-label">Tab 2</span>
    </a>
  </div>
</div>

Scrollable Tabbar

<f7-toolbar tabbar scrollable>
  <f7-link tab-link="#tab1">Tab 1</f7-link>
  <f7-link tab-link="#tab2">Tab 2</f7-link>
</f7-toolbar>

<!-- Renders to: -->

<div class="toolbar tabbar tabbar-scrollable">
  <div class="toolbar-inner">
    <a href="#" class="tab-link" data-tab="#tab1">Tab 1</a>
    <a href="#" class="tab-link" data-tab="#tab2">Tab 2</a>
  </div>
</div>