工具栏 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>

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

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

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

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