Toolbar Vue Component

• Toolbar Properties
• Toolbar Slots
• Tabbar
• Tabbar Scrollable

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

There are following components included:

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

<template>
  <f7-page>
    <f7-navbar title="Toolbar" back-link="Back"></f7-navbar>
    <f7-toolbar :bottom-md="isBottom">
      <f7-link>Left Link</f7-link>
      <f7-link>Right Link</f7-link>
    </f7-toolbar>
    <f7-block-title v-if="$theme.md">Toolbar Position</f7-block-title>
    <f7-block v-if="$theme.md">
      <p>Material (MD) theme 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>
    </f7-block>
    <f7-block>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi...</p>
    </f7-block>
  </f7-page>
</template>
<script>
  export default {
    data() {
        isBottom: false,
      };
    }
  }
</script>

<template>
  <f7-page :page-content="false">
    <f7-navbar title="Tabbar Labels" back-link="Back">
      <f7-nav-right v-if="$theme.md">
        <f7-link icon-material="compare_arrows" @click="isBottom != isBottom"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar tabbar labels :bottom-md="isBottom">
      <f7-link tab-link="#tab-1" tab-link-active text="Tab 1" icon-ios="f7:email_fill" icon-md="material:email"></f7-link>
      <f7-link tab-link="#tab-2" text="Tab 2" icon-ios="f7:today_fill" icon-md="material:today"></f7-link>
      <f7-link tab-link="#tab-3" text="Tab 3" icon-ios="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">
          <p>Tab 2 content</p>
          ...
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-3" class="page-content">
          <p>Tab 3 content</p>
          ...
        </f7-block>
      </f7-tab>
    </f7-tabs>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isBottom: false,
      };
    }
  }
</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>
</template>