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.

Usage 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 Material Theme only)

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

Renders to:

<div class="toolbar toolbar-bottom">
  <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>

Slots

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

• 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>
  <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>

Properties

Prop	Type	Description
bottom	boolean	Defines whether the Toolbar should be on bottom or not (Material theme only)
tabbar	boolean	Defines whether the Toolbar is also a Tab Bar
labels	boolean	Enables Tab Bar with labels (affects only when tabbar: true)
scrollable	boolean	Enables scrollable Tab Bar (affects only when tabbar: true)
theme	string	Toolbar theme color. One of default colors
layout	string	Toolbar layout theme. One of default layout themes
no-shadow	boolean	Disable shadow rendering for Material theme

Methods

.hide(animated)	Hide toolbar
.show(animated)	Show toolbar