Toolbar Vue Component

Toolbar Components
Toolbar Properties
Toolbar Methods
Toolbar Slots
Examples

Toolbar
Tabbar
Tabbar Labels
Tabbar Scrollable
Hide Toolbar On Scroll

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.

There are following components included:

f7-toolbar

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
position	string		Toolbar position, can be `top` or `bottom`
top	boolean		Top positioned toolbar. Shortening for `position="top"`
top-ios	boolean		Top positioned toolbar only for iOS theme
top-md	boolean		Top positioned toolbar only for MD theme
top-aurora	boolean		Top positioned toolbar only for Aurora theme
bottom	boolean		Bottom positioned toolbar. Shortening for `position="bottom"`
bottom-ios	boolean		Bottom positioned toolbar only for iOS theme
bottom-md	boolean		Bottom positioned toolbar only for MD theme
bottom-aurora	boolean		Bottom positioned toolbar only for Aurora theme
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

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

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

<template>
  <f7-page>
    <f7-navbar title="Toolbar" back-link="Back"></f7-navbar>
    <f7-toolbar :position="isBottom ? 'bottom' : 'top'">
      <f7-link>Left Link</f7-link>
      <f7-link>Right Link</f7-link>
    </f7-toolbar>
    <f7-block-title>Toolbar Position</f7-block-title>
    <f7-block>
      <p>Toolbar supports both top and bottom positions. Click the following button to change its position.</p>
      <p>
        <f7-button raised @click="isBottom = !isBottom">Toggle Toolbar Position</f7-button>
      </p>
    </f7-block>
    <f7-block>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae...</p>
    </f7-block>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isBottom: true,
      };
    }
  }
</script>

Tabbar

<template>
  <f7-page :page-content="false">
    <f7-navbar title="Tabbar" back-link="Back">
      <f7-nav-right>
        <f7-link icon-ios="f7:reload" icon-aurora="f7:reload" icon-md="material:compare_arrows" @click="isBottom = !isBottom"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar tabbar :position="isBottom ? 'bottom' : 'top'">
      <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
      <f7-link tab-link="#tab-2">Tab 2</f7-link>
      <f7-link tab-link="#tab-3">Tab 3</f7-link>
    </f7-toolbar>

    <f7-tabs>
      <f7-tab id="tab-1" class="page-content" tab-active>
        <f7-block>
          <p>Tab 1 content</p>
          ...
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-2" class="page-content">
        <f7-block>
          <p>Tab 2 content</p>
          ...
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-3" class="page-content">
        <f7-block>
          <p>Tab 3 content</p>
          ...
        </f7-block>
      </f7-tab>
    </f7-tabs>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isBottom: true,
      };
    }
  }
</script>

Tabbar Labels

<template>
  <f7-page :page-content="false">
    <f7-navbar title="Tabbar Labels" back-link="Back">
      <f7-nav-right>
        <f7-link icon-ios="f7:reload" icon-aurora="f7:reload" icon-md="material:compare_arrows" @click="isBottom = !isBottom"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar tabbar labels :position="isBottom ? 'bottom' : 'top'">
      <f7-link tab-link="#tab-1" tab-link-active text="Tab 1" icon-ios="f7:email_fill" icon-aurora="f7:email_fill" icon-md="material:email"></f7-link>
      <f7-link tab-link="#tab-2" text="Tab 2" icon-ios="f7:today_fill" icon-aurora="f7:today_fill" icon-md="material:today"></f7-link>
      <f7-link tab-link="#tab-3" text="Tab 3" icon-ios="f7:cloud_fill" icon-aurora="f7:cloud_fill" icon-md="material:file_upload"></f7-link>
    </f7-toolbar>

    <f7-tabs>
      <f7-tab id="tab-1" class="page-content" tab-active>
        <f7-block>
          <p>Tab 1 content</p>
          ...
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-2" class="page-content">
        <f7-block>
          <p>Tab 2 content</p>
          ...
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-3" class="page-content">
        <f7-block>
          <p>Tab 3 content</p>
          ...
        </f7-block>
      </f7-tab>
    </f7-tabs>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isBottom: true,
      };
    }
  }
</script>

Tabbar Scrollable

<template>
  <f7-page :page-content="false">
    <f7-navbar title="Tabbar Scrollable" back-link="Back">
      <f7-nav-right>
        <f7-link icon-ios="f7:reload" icon-aurora="f7:reload" icon-md="material:compare_arrows" @click="isBottom = !isBottom"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar tabbar scrollable :position="isBottom ? 'bottom' : 'top'">
      <f7-link
        v-for="(tab, index) in tabs"
        :key="tab"
        :tab-link="`#tab-${tab}`"
        :tab-link-active="index === 0"
        >Tab {{tab}}</f7-link>
    </f7-toolbar>
    <f7-tabs>
      <f7-tab
        v-for="(tab, index) in tabs"
        :key="tab"
        :id="`tab-${tab}`"
        class="page-content"
        :tab-active="index === 0"
      >
        <f7-block>
          <p><b>Tab {{tab}} content</b></p>
          ...
        </f7-block>
      </f7-tab>
    </f7-tabs>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        tabs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        isBottom: true,
      };
    }
  }
</script>

<template>
  <f7-page hide-toolbar-on-scroll>
    <f7-navbar title="Hide Toolbar On Scroll" back-link="Back"></f7-navbar>
    <f7-toolbar bottom-md>
      <f7-link>Left Link</f7-link>
      <f7-link>Right Link</f7-link>
    </f7-toolbar>
    <f7-block strong>
      <p>Toolbar will be hidden if you scroll bottom</p>
    </f7-block>
    <f7-block>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos maxime incidunt id ab culpa ipsa omnis eos, vel excepturi officiis neque illum perferendis dolorum magnam rerum natus dolore nulla ex.</p>
      ...
    </f7-block>
  </f7-page>
</template>

Toolbar Vue Component

Toolbar Components

Toolbar Properties

Toolbar Methods

Toolbar Slots

Examples

Toolbar

Tabbar

Tabbar Labels

Tabbar Scrollable

Hide Toolbar On Scroll