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

ツールバーは、ナビゲーション要素を含む画面下部の固定された(FixedとThroughのレイアウトタイプを持つ)領域です。Toolbarは部品を持たず、内部には単なるリンクがあるだけです。

Toolbar Reactコンポーネントは、Toolbarコンポーネントを表します。

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

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

Toolbar（ツールバー

ツールバーのプロパティ

Prop	Type	Default	Description
<Toolbar> properties
inner	boolean	true	有効にすると(デフォルト)、すべてのコンテンツが内部の `toolbarInner` 要素内に配置されます。完全にカスタムされたレイアウトを内部に配置したい場合にのみ、これを無効にしてください。
position	string		ツールバーの位置, `top` または `bottom` になります。
top	boolean		ツールバーの位置が一番上になります。position="top"` の短縮形です。
topIos	boolean		トップポジションのツールバーは iOS テーマのみ
topMd	boolean		MDテーマでは、ツールバーの最上位に位置します。
topAurora	boolean		Aurora テーマでは、ツールバーの上部に位置します。
bottom	boolean		ボトムポジションのツールバー。短縮形は `position="bottom"` です。
bottomIos	boolean		ボトムポジションのツールバーはiOSテーマのみ
bottomMd	boolean		ボトムポジションのツールバーは、MDテーマの場合のみ
bottomAurora	boolean		最下部に配置されたツールバーはAuroraテーマの場合のみ
tabbar	boolean	false	ツールバーをタブバーにするかどうかを指定します。
labels	boolean	false	ラベル付きのタブバーを有効にします（`tabbar: true`の場合のみ影響します）。
scrollable	boolean	false	スクロール可能なタブバーを有効にする (`tabbar: true` の場合のみ)
noShadow	boolean		Materialテーマのシャドウレンダリングを無効にする
noHairline	boolean	false	iOSテーマでツールバー/タブバーの上部の細い境界線（ヘアライン）を無効にする
hidden	boolean	false	ツールバーを非表示にする

ツールバーメソッド

<Toolbar> methods
.hide(animate)	ツールバーを隠す
.show(animate)	ツールバーを表示する

ツールバーのイベント

Event	Description
<Toolbar> events
toolbarHide	ツールバーが非表示になるとイベントが発生します。
toolbarShow	ツールバーが表示されるとイベントが発生します。

ツールバーのスロット

ツールバーのReactコンポーネント(<Toolbar>)には、カスタム要素用のスロットが追加されています。

default - 要素は <div class="toolbarInner"> 要素の子として挿入されます。
beforeInner - 要素は <div class="toolbarInner"> 要素の直前に挿入されます。
afterInner - 要素は <div class="toolbarInner"> 要素の直後に挿入されます。

<Toolbar>
  <div slot="beforeInner">Before Inner</div>
  <div slot="afterInner">After Inner</div>
  {/* Goes to default slot: */}
  <Link>Left Link</Link>
  <Link>Right Link</Link>
</Toolbar>

{/* Renders to: */}

<div class="toolbar">
  <div>Before Inner</div>
  <div class="toolbarInner">
    <a href="#" class="link">Left Link</a>
    <a href="#" class="link">Right Link</a>
  </div>
  <div>After Inner</div>
</div>

Examples

ツールバー

import React, { useState } from 'react';
import { Page, Navbar, Toolbar, Link, BlockTitle, Block, Button } from 'framework7-react';

export default () => {
  const [isBottom, setIsBottom] = useState(true);

  return (
    <Page>
  <Navbar title="Toolbar" backLink="Back"></Navbar>

  <Toolbar position={isBottom ? 'bottom' : 'top'}>
    <Link>Left Link</Link>
    <Link>Right Link</Link>
  </Toolbar>

  <BlockTitle>Toolbar Position</BlockTitle>

  <Block>
    <p>
      Toolbar supports both top and bottom positions. Click the following button to change its
      position.
    </p>
    <p>
      <Button raised onClick={() => setIsBottom(!isBottom)}>
        Toggle Toolbar Position
      </Button>
    </p>
  </Block>

  <Block>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
      facilis laudantium voluptates obcaecati officia cum, sit libero commodi...
    </p>
  </Block>
    </Page>
  );
};

タブバー

import React, { useState } from 'react';
import { Page, Navbar, Toolbar, Link, Block, NavRight, Tabs, Tab } from 'framework7-react';

export default () => {
  const [isBottom, setIsBottom] = useState(true);
  return (
    <Page pageContent={false}>
  <Navbar title="Tabbar" backLink="Back">
    <NavRight>
      <Link
        iconIos="f7:arrow_up_arrow_down_circle_fill"
        iconAurora="f7:arrow_up_arrow_down_circle_fill"
        iconMd="material:compare_arrows"
        onClick={() => setIsBottom(!isBottom)}
      ></Link>
    </NavRight>
  </Navbar>

  <Toolbar tabbar position={isBottom ? 'bottom' : 'top'}>
    <Link tabLink="#tab-1" tabLinkActive>
      Tab 1
    </Link>
    <Link tabLink="#tab-2">Tab 2</Link>
    <Link tabLink="#tab-3">Tab 3</Link>
  </Toolbar>

  <Tabs>
    <Tab id="tab-1" className="page-content" tabActive>
      <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>
      </Block>
    </Tab>
    <Tab id="tab-2" className="page-content">
      <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>
      </Block>
    </Tab>
    <Tab id="tab-3" className="page-content">
      <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>
      </Block>
    </Tab>
  </Tabs>
    </Page>
  );
};

タブバーのラベル

import React, { useState } from 'react';
import { Page, Navbar, Toolbar, Link, Block, NavRight, Tabs, Tab } from 'framework7-react';

export default () => {
  const [isBottom, setIsBottom] = useState(true);
  return (
    <Page pageContent={false}>
  <Navbar title="Tabbar Labels" backLink="Back">
    <NavRight>
      <Link
        iconIos="f7:arrow_up_arrow_down_circle_fill"
        iconAurora="f7:arrow_up_arrow_down_circle_fill"
        iconMd="material:compare_arrows"
        onClick={() => setIsBottom(!isBottom)}
      ></Link>
    </NavRight>
  </Navbar>

  <Toolbar tabbar labels position={isBottom ? 'bottom' : 'top'}>
    <Link
      tabLink="#tab-1"
      tabLinkActive
      text="Tab 1"
      iconIos="f7:envelope_fill"
      iconAurora="f7:envelope_fill"
      iconMd="material:email"
    ></Link>
    <Link
      tabLink="#tab-2"
      text="Tab 2"
      iconIos="f7:calendar_fill"
      iconAurora="f7:calendar_fill"
      iconMd="material:today"
    ></Link>
    <Link
      tabLink="#tab-3"
      text="Tab 3"
      iconIos="f7:cloud_upload_fill"
      iconAurora="f7:cloud_upload_fill"
      iconMd="material:file_upload"
    ></Link>
  </Toolbar>

  <Tabs>
    <Tab id="tab-1" className="page-content" tabActive>
      <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>
      </Block>
    </Tab>
    <Tab id="tab-2" className="page-content">
      <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>
      </Block>
    </Tab>
    <Tab id="tab-3" className="page-content">
      <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>
      </Block>
    </Tab>
  </Tabs>
    </Page>
  );
};

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

import React, { useState } from 'react';
import { Page, Navbar, Toolbar, Link, Block, NavRight, Tabs, Tab } from 'framework7-react';

export default () => {
  const [isBottom, setIsBottom] = useState(true);
  const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  return (
    <Page pageContent={false}>
  <Navbar title="Tabbar Scrollable" backLink="Back">
    <NavRight>
      <Link
        iconIos="f7:arrow_up_arrow_down_circle_fill"
        iconAurora="f7:arrow_up_arrow_down_circle_fill"
        iconMd="material:compare_arrows"
        onClick={() => setIsBottom(!isBottom)}
      ></Link>
    </NavRight>
  </Navbar>

  <Toolbar tabbar scrollable position={isBottom ? 'bottom' : 'top'}>
    {tabs.map((tab, index) => (
      <Link key={tab} tabLink={`#tab-${tab}`} tabLinkActive={index === 0}>
        Tab {tab}
      </Link>
    ))}
  </Toolbar>

  <Tabs>
    {tabs.map((tab, index) => (
      <Tab key={tab} id={`tab-${tab}`} className="page-content" tabActive={index === 0}>
        <Block>
          <p>
            <b>Tab {tab} content</b>
          </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>
        </Block>
      </Tab>
    ))}
  </Tabs>
    </Page>
  );
};

スクロール時にツールバーを隠す

import React from 'react';
import { Page, Navbar, Toolbar, Link, Block } from 'framework7-react';

export default () => {
  return (
    <Page hideToolbarOnScroll>
  <Navbar title="Hide Toolbar On Scroll" backLink="Back"></Navbar>

  <Toolbar bottom>
    <Link>Left Link</Link>
    <Link>Right Link</Link>
  </Toolbar>

  <Block strong>
    <p>Toolbar will be hidden if you scroll bottom</p>
  </Block>
  <Block>
    <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>
  </Block>
    </Page>
  );
};