ツールバー Vue コンポーネント

ツールバーは、画面下部に固定された（固定およびスルーレイアウトタイプ）領域で、ナビゲーション要素を含みます。ツールバーには部品はなく、内部にはプレーンなリンクのみがあります。

ツールバー Vue コンポーネントは、ツールバーコンポーネントを表します。

以下のコンポーネントが含まれています

f7-toolbar

プロパティ	タイプ	デフォルト	説明
<f7-toolbar> プロパティ
inner	boolean	true	有効（デフォルト）の場合、すべてのコンテンツを内部の `toolbar-inner` 要素内に配置します。完全にカスタムレイアウトを内部に配置したい場合にのみ無効にしてください。
position	string		ツールバーの位置、`top` または `bottom` を指定できます。
top	boolean		上部に配置されたツールバー。`position="top"` の短縮形です。
top-ios	boolean		iOSテーマでのみ上部に配置されたツールバー
top-md	boolean		MDテーマでのみ上部に配置されたツールバー
bottom	boolean		下部に配置されたツールバー。`position="bottom"` の短縮形です。
bottom-ios	boolean		iOSテーマでのみ下部に配置されたツールバー
bottom-md	boolean		MDテーマでのみ下部に配置されたツールバー
tabbar	boolean	false	ツールバーがタブバーでもあるかどうかを定義します。
icons	boolean	false	アイコン付きのタブバーを有効にします (`tabbar: true` の場合にのみ有効)。
scrollable	boolean	false	スクロール可能なタブバーを有効にします (`tabbar: true` の場合にのみ有効)。
no-shadow	boolean		Materialテーマのシャドウレンダリングを無効にします
outline	boolean	true	iOSテーマ用のツールバー/タブバーの上部に薄いボーダー（ヘアライン）を追加します。
hidden	boolean	false	ツールバーを非表示にします

<f7-toolbar> メソッド
.hide(animate)	ツールバーを非表示にします
.show(animate)	ツールバーを表示します

イベント	説明
<f7-toolbar> イベント
toolbar:hide	ツールバーが非表示になったときにトリガーされるイベント
toolbar:show	ツールバーが表示されたときにトリガーされるイベント

ツールバー Vue コンポーネント (<f7-toolbar>) には、カスタム要素用の追加のスロットがあります。

default - 要素は <div class="toolbar-inner"> 要素の子として挿入されます
before-inner - 要素は <div class="toolbar-inner"> 要素の直前に挿入されます
after-inner - 要素は <div class="toolbar-inner"> 要素の直後に挿入されます

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

例

toolbar-tabbar.vue

<template>
  <f7-page>
    <f7-navbar title="Toolbar & Tabbar"></f7-navbar>
    <f7-toolbar :position="toolbarPosition">
      <f7-link>Left Link</f7-link>
      <f7-link>Right Link</f7-link>
    </f7-toolbar>
    <!-- example-hidden-start -->
    <f7-list inset-md strong dividers-ios outline-ios class="example-hidden">
      <f7-list-item link="./tabbar/" title="Tabbar" />
      <f7-list-item link="./tabbar-icons/" title="Tabbar With Icons" />
      <f7-list-item link="./tabbar-scrollable/" title="Tabbar Scrollable" />
      <f7-list-item link="./toolbar-hide-scroll/" title="Hide Toolbar On Scroll" />
    </f7-list>
    <!-- example-hidden-end -->
    <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 fill @click="toggleToolbarPosition">Toggle Toolbar Position</f7-button>
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Toolbar,
  f7List,
  f7ListItem,
  f7Button,
  f7Link,
  f7BlockTitle,
  f7Block,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Toolbar,
    f7List,
    f7ListItem,
    f7Button,
    f7Link,
    f7BlockTitle,
    f7Block,
  },
  data() {
    return {
      toolbarPosition: 'bottom',
    };
  },
  methods: {
    toggleToolbarPosition() {
      this.toolbarPosition = this.toolbarPosition === 'top' ? 'bottom' : 'top';
    },
  },
};
</script>

タブバー

tabbar.vue

<template>
  <f7-page :page-content="false">
    <f7-navbar title="Tabbar">
      <f7-nav-right>
        <f7-link
          icon-md="material:compare_arrows"
          icon-ios="f7:arrow_up_arrow_down_circle_fill"
          @click="toggleToolbarPosition"
        />
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar :position="toolbarPosition" tabbar>
      <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>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
            facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
            suscipit temporibus sequi iure ad laboriosam accusamus?
          </p>
          <p>
            Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
            blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
            sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
            deleniti.
          </p>
          <p>
            Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
            est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
            delectus a maiores nihil dolores? Natus, perferendis.
          </p>
          <p>
            Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
            perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
            ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
          </p>
          <p>
            Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
            ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
            explicabo, unde aliquid impedit! Adipisci!
          </p>
          <p>
            Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
            fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
            accusantium, officiis veniam nostrum cum cumque impedit.
          </p>
          <p>
            Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
            praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
            provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
          </p>
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-2" class="page-content">
        <f7-block>
          <p>Tab 2 content</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
            facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
            suscipit temporibus sequi iure ad laboriosam accusamus?
          </p>
          <p>
            Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
            blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
            sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
            deleniti.
          </p>
          <p>
            Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
            est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
            delectus a maiores nihil dolores? Natus, perferendis.
          </p>
          <p>
            Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
            perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
            ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
          </p>
          <p>
            Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
            ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
            explicabo, unde aliquid impedit! Adipisci!
          </p>
          <p>
            Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
            fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
            accusantium, officiis veniam nostrum cum cumque impedit.
          </p>
          <p>
            Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
            praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
            provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
          </p>
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-3" class="page-content">
        <f7-block>
          <p>Tab 3 content</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
            facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
            suscipit temporibus sequi iure ad laboriosam accusamus?
          </p>
          <p>
            Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
            blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
            sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
            deleniti.
          </p>
          <p>
            Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
            est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
            delectus a maiores nihil dolores? Natus, perferendis.
          </p>
          <p>
            Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
            perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
            ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
          </p>
          <p>
            Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
            ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
            explicabo, unde aliquid impedit! Adipisci!
          </p>
          <p>
            Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
            fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
            accusantium, officiis veniam nostrum cum cumque impedit.
          </p>
          <p>
            Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
            praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
            provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
          </p>
        </f7-block>
      </f7-tab>
    </f7-tabs>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Block,
  f7Tabs,
  f7Tab,
  f7Link,
  f7Toolbar,
  f7NavRight,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Block,
    f7Tabs,
    f7Tab,
    f7Link,
    f7Toolbar,
    f7NavRight,
  },
  data() {
    return {
      toolbarPosition: 'bottom',
    };
  },
  methods: {
    toggleToolbarPosition() {
      this.toolbarPosition = this.toolbarPosition === 'top' ? 'bottom' : 'top';
    },
  },
};
</script>

タブバーアイコン

tabbar-icons.vue

<template>
  <f7-page :page-content="false">
    <f7-navbar title="Tabbar Icons">
      <f7-nav-right>
        <f7-link
          icon-md="material:compare_arrows"
          icon-ios="f7:arrow_up_arrow_down_circle_fill"
          @click="toggleToolbarPosition"
        />
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar :position="toolbarPosition" tabbar icons>
      <f7-link
        tab-link="#tab-1"
        tab-link-active
        text="Tab 1"
        icon-ios="f7:envelope_fill"
        icon-md="material:email"
      />
      <f7-link
        tab-link="#tab-2"
        text="Tab 2"
        icon-ios="f7:calendar_fill"
        icon-md="material:today"
      />
      <f7-link
        tab-link="#tab-3"
        text="Tab 3"
        icon-ios="f7:cloud_upload_fill"
        icon-md="material:file_upload"
      />
    </f7-toolbar>

    <f7-tabs>
      <f7-tab id="tab-1" class="page-content" tab-active>
        <f7-block>
          <p>Tab 1 content</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
            facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
            suscipit temporibus sequi iure ad laboriosam accusamus?
          </p>
          <p>
            Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
            blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
            sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
            deleniti.
          </p>
          <p>
            Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
            est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
            delectus a maiores nihil dolores? Natus, perferendis.
          </p>
          <p>
            Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
            perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
            ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
          </p>
          <p>
            Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
            ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
            explicabo, unde aliquid impedit! Adipisci!
          </p>
          <p>
            Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
            fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
            accusantium, officiis veniam nostrum cum cumque impedit.
          </p>
          <p>
            Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
            praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
            provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
          </p>
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-2" class="page-content">
        <f7-block>
          <p>Tab 2 content</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
            facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
            suscipit temporibus sequi iure ad laboriosam accusamus?
          </p>
          <p>
            Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
            blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
            sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
            deleniti.
          </p>
          <p>
            Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
            est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
            delectus a maiores nihil dolores? Natus, perferendis.
          </p>
          <p>
            Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
            perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
            ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
          </p>
          <p>
            Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
            ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
            explicabo, unde aliquid impedit! Adipisci!
          </p>
          <p>
            Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
            fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
            accusantium, officiis veniam nostrum cum cumque impedit.
          </p>
          <p>
            Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
            praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
            provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
          </p>
        </f7-block>
      </f7-tab>
      <f7-tab id="tab-3" class="page-content">
        <f7-block>
          <p>Tab 3 content</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
            facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
            suscipit temporibus sequi iure ad laboriosam accusamus?
          </p>
          <p>
            Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
            blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
            sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
            deleniti.
          </p>
          <p>
            Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
            est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
            delectus a maiores nihil dolores? Natus, perferendis.
          </p>
          <p>
            Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
            perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
            ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
          </p>
          <p>
            Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
            ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
            explicabo, unde aliquid impedit! Adipisci!
          </p>
          <p>
            Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
            fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
            accusantium, officiis veniam nostrum cum cumque impedit.
          </p>
          <p>
            Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
            praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
            provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
          </p>
        </f7-block>
      </f7-tab>
    </f7-tabs>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Block,
  f7Tabs,
  f7Tab,
  f7Link,
  f7Toolbar,
  f7NavRight,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Block,
    f7Tabs,
    f7Tab,
    f7Link,
    f7Toolbar,
    f7NavRight,
  },
  data() {
    return {
      toolbarPosition: 'bottom',
    };
  },
  methods: {
    toggleToolbarPosition() {
      this.toolbarPosition = this.toolbarPosition === 'top' ? 'bottom' : 'top';
    },
  },
};
</script>

スクロール可能なタブバー

tabbar-scrollable.vue

<template>
  <f7-page :page-content="false">
    <f7-navbar title="Tabbar Scrollable">
      <f7-nav-right>
        <f7-link
          icon-md="material:compare_arrows"
          icon-ios="f7:arrow_up_arrow_down_circle_fill"
          @click="toggleToolbarPosition"
        />
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar :position="toolbarPosition" tabbar scrollable>
      <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"
        :id="`tab-${tab}`"
        :key="tab"
        class="page-content"
        :tab-active="index === 0"
      >
        <f7-block>
          <p>
            <b>Tab {{ tab }} content</b>
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque corrupti, quos
            asperiores unde aspernatur illum odio, eveniet. Fugiat magnam perspiciatis ex
            dignissimos, rerum modi ea nesciunt praesentium iusto optio rem?
          </p>
          <p>
            Illo debitis et recusandae, ipsum nisi nostrum vero delectus quasi. Quasi, consequatur!
            Corrupti, explicabo maxime incidunt fugit sint dicta saepe officiis sed expedita, minima
            porro! Ipsa dolores quia, delectus labore!
          </p>
          <p>
            At similique minima placeat magni molestias sunt deleniti repudiandae voluptatibus
            magnam quam esse reprehenderit dolor enim qui sed alias, laboriosam quaerat laborum iure
            repellat praesentium pariatur dolorum possimus veniam! Consectetur.
          </p>
          <p>
            Sunt, sed, magnam! Qui, suscipit. Beatae cum ullam necessitatibus eligendi, culpa rem
            excepturi consequatur quidem totam eum voluptates nihil, enim pariatur incidunt corporis
            sed facere magni earum tenetur rerum ea.
          </p>
          <p>
            Veniam nulla quis molestias voluptatem inventore consectetur iusto voluptatibus
            perferendis quisquam, cupiditate voluptates, tenetur vero magnam nisi animi praesentium
            atque adipisci optio quod aliquid vel delectus ad? Dicta deleniti, recusandae.
          </p>
        </f7-block>
      </f7-tab>
    </f7-tabs>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Block,
  f7Tabs,
  f7Tab,
  f7Link,
  f7Toolbar,
  f7NavRight,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Block,
    f7Tabs,
    f7Tab,
    f7Link,
    f7Toolbar,
    f7NavRight,
  },
  data() {
    return {
      tabs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      toolbarPosition: 'bottom',
    };
  },
  methods: {
    toggleToolbarPosition() {
      this.toolbarPosition = this.toolbarPosition === 'top' ? 'bottom' : 'top';
    },
  },
};
</script>

toolbar-hide-scroll.vue

<template>
  <f7-page hide-toolbar-on-scroll>
    <f7-navbar title="Hide Toolbar On Scroll"></f7-navbar>
    <f7-toolbar bottom>
      <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>
      <p>
        Eum dolore, amet enim quaerat omnis. Modi minus voluptatum quam veritatis assumenda,
        eligendi minima dolore in autem delectus sequi accusantium? Cupiditate praesentium autem
        eius, esse ratione consequuntur dolor minus error.
      </p>
      <p>
        Repellendus ipsa sint quisquam delectus dolore quidem odio, praesentium, sequi temporibus
        amet architecto? Commodi molestiae, in repellat fugit! Laudantium, fuga quia officiis error.
        Provident inventore iusto quas iure, expedita optio.
      </p>
      <p>
        Eligendi recusandae eos sed alias delectus reprehenderit quaerat modi dolor commodi beatae
        temporibus nisi ullam ut, quae, animi esse in officia nesciunt sequi amet repellendus?
        Maiores quos provident nisi expedita.
      </p>
      <p>
        Dolorem aspernatur repudiandae aperiam autem excepturi inventore explicabo molestiae atque,
        architecto consequatur ab quia quaerat deleniti quis ipsum alias itaque veritatis maiores
        consectetur minima facilis amet. Maiores impedit ipsum sint.
      </p>
      <p>
        Consequuntur minus fugit vitae magnam illo quibusdam. Minima rerum, magnam nostrum id error
        temporibus odio molestias tempore vero, voluptas quam iusto. In laboriosam blanditiis,
        ratione consequuntur similique, quos repellendus ex!
      </p>
      <p>
        Error suscipit odio modi blanditiis voluptatibus tempore minima ipsam accusantium id! Minus,
        ea totam veniam dolorem aspernatur repudiandae quae similique odio dolor, voluptate quis aut
        tenetur porro culpa odit aliquid.
      </p>
      <p>
        Aperiam velit sed sit quaerat, expedita tempore aspernatur iusto nobis ipsam error ut
        sapiente delectus in minima recusandae dolore alias, cumque labore. Doloribus veritatis
        magni nisi odio voluptatum perferendis placeat!
      </p>
      <p>
        Eaque laboriosam iusto corporis iure nemo ab deleniti ut facere laborum, blanditiis neque
        nihil dignissimos fuga praesentium illo facilis eos beatae accusamus cumque molestiae
        asperiores cupiditate? Provident laborum officiis suscipit!
      </p>
      <p>
        Exercitationem odio nulla rerum soluta aspernatur fugit, illo iusto ullam similique.
        Recusandae consectetur rem, odio autem voluptate similique atque, alias possimus quis vitae
        in, officiis labore deserunt aspernatur rerum sunt?
      </p>
      <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>
      <p>
        Eum dolore, amet enim quaerat omnis. Modi minus voluptatum quam veritatis assumenda,
        eligendi minima dolore in autem delectus sequi accusantium? Cupiditate praesentium autem
        eius, esse ratione consequuntur dolor minus error.
      </p>
      <p>
        Repellendus ipsa sint quisquam delectus dolore quidem odio, praesentium, sequi temporibus
        amet architecto? Commodi molestiae, in repellat fugit! Laudantium, fuga quia officiis error.
        Provident inventore iusto quas iure, expedita optio.
      </p>
      <p>
        Eligendi recusandae eos sed alias delectus reprehenderit quaerat modi dolor commodi beatae
        temporibus nisi ullam ut, quae, animi esse in officia nesciunt sequi amet repellendus?
        Maiores quos provident nisi expedita.
      </p>
      <p>
        Dolorem aspernatur repudiandae aperiam autem excepturi inventore explicabo molestiae atque,
        architecto consequatur ab quia quaerat deleniti quis ipsum alias itaque veritatis maiores
        consectetur minima facilis amet. Maiores impedit ipsum sint.
      </p>
      <p>
        Consequuntur minus fugit vitae magnam illo quibusdam. Minima rerum, magnam nostrum id error
        temporibus odio molestias tempore vero, voluptas quam iusto. In laboriosam blanditiis,
        ratione consequuntur similique, quos repellendus ex!
      </p>
      <p>
        Error suscipit odio modi blanditiis voluptatibus tempore minima ipsam accusantium id! Minus,
        ea totam veniam dolorem aspernatur repudiandae quae similique odio dolor, voluptate quis aut
        tenetur porro culpa odit aliquid.
      </p>
      <p>
        Aperiam velit sed sit quaerat, expedita tempore aspernatur iusto nobis ipsam error ut
        sapiente delectus in minima recusandae dolore alias, cumque labore. Doloribus veritatis
        magni nisi odio voluptatum perferendis placeat!
      </p>
      <p>
        Eaque laboriosam iusto corporis iure nemo ab deleniti ut facere laborum, blanditiis neque
        nihil dignissimos fuga praesentium illo facilis eos beatae accusamus cumque molestiae
        asperiores cupiditate? Provident laborum officiis suscipit!
      </p>
      <p>
        Exercitationem odio nulla rerum soluta aspernatur fugit, illo iusto ullam similique.
        Recusandae consectetur rem, odio autem voluptate similique atque, alias possimus quis vitae
        in, officiis labore deserunt aspernatur rerum sunt?
      </p>
      <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>
      <p>
        Eum dolore, amet enim quaerat omnis. Modi minus voluptatum quam veritatis assumenda,
        eligendi minima dolore in autem delectus sequi accusantium? Cupiditate praesentium autem
        eius, esse ratione consequuntur dolor minus error.
      </p>
      <p>
        Repellendus ipsa sint quisquam delectus dolore quidem odio, praesentium, sequi temporibus
        amet architecto? Commodi molestiae, in repellat fugit! Laudantium, fuga quia officiis error.
        Provident inventore iusto quas iure, expedita optio.
      </p>
      <p>
        Eligendi recusandae eos sed alias delectus reprehenderit quaerat modi dolor commodi beatae
        temporibus nisi ullam ut, quae, animi esse in officia nesciunt sequi amet repellendus?
        Maiores quos provident nisi expedita.
      </p>
      <p>
        Dolorem aspernatur repudiandae aperiam autem excepturi inventore explicabo molestiae atque,
        architecto consequatur ab quia quaerat deleniti quis ipsum alias itaque veritatis maiores
        consectetur minima facilis amet. Maiores impedit ipsum sint.
      </p>
      <p>
        Consequuntur minus fugit vitae magnam illo quibusdam. Minima rerum, magnam nostrum id error
        temporibus odio molestias tempore vero, voluptas quam iusto. In laboriosam blanditiis,
        ratione consequuntur similique, quos repellendus ex!
      </p>
      <p>
        Error suscipit odio modi blanditiis voluptatibus tempore minima ipsam accusantium id! Minus,
        ea totam veniam dolorem aspernatur repudiandae quae similique odio dolor, voluptate quis aut
        tenetur porro culpa odit aliquid.
      </p>
      <p>
        Aperiam velit sed sit quaerat, expedita tempore aspernatur iusto nobis ipsam error ut
        sapiente delectus in minima recusandae dolore alias, cumque labore. Doloribus veritatis
        magni nisi odio voluptatum perferendis placeat!
      </p>
      <p>
        Eaque laboriosam iusto corporis iure nemo ab deleniti ut facere laborum, blanditiis neque
        nihil dignissimos fuga praesentium illo facilis eos beatae accusamus cumque molestiae
        asperiores cupiditate? Provident laborum officiis suscipit!
      </p>
      <p>
        Exercitationem odio nulla rerum soluta aspernatur fugit, illo iusto ullam similique.
        Recusandae consectetur rem, odio autem voluptate similique atque, alias possimus quis vitae
        in, officiis labore deserunt aspernatur rerum sunt?
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7Toolbar, f7Link, f7Block } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Toolbar,
    f7Link,
    f7Block,
  },
};
</script>

このドキュメントを改善する

このページについて

ツールバーコンポーネント
ツールバープロパティ
ツールバーメソッド
ツールバーイベント
ツールバースロット
例

ツールバー
タブバー
タブバーアイコン
スクロール可能なタブバー
スクロール時にツールバーを非表示にする

ツールバー Vue コンポーネント

ツールバーコンポーネント

ツールバープロパティ

ツールバーメソッド

ツールバーイベント

ツールバースロット

例

ツールバー

タブバー

タブバーアイコン

スクロール可能なタブバー

スクロール時にツールバーを非表示にする