スポンサースポンサーになる

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

ツールバーは、画面下部に固定された（Fixed および Through レイアウトタイプ）領域で、ナビゲーション要素が含まれています。ツールバーにはパーツがなく、内部にプレーンなリンクがあるだけです。

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

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

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

ツールバーのプロパティ

プロパティタイプデフォルト説明
<Toolbar> プロパティ
innerbooleantrue有効になっている場合（デフォルト）、すべてのコンテンツを内部のtoolbarInner要素内に配置します。内部に完全にカスタムなレイアウトを配置したい場合にのみ無効にしてください。
positionstringツールバーの位置、topまたはbottomを指定できます。
topboolean上部に配置されたツールバー。position="top"の短縮形。
topIosbooleaniOSテーマの場合のみ上部に配置されたツールバー。
topMdbooleanMDテーマの場合のみ上部に配置されたツールバー。
bottomboolean下部に配置されたツールバー。position="bottom"の短縮形。
bottomIosbooleaniOSテーマの場合のみ下部に配置されたツールバー。
bottomMdbooleanMDテーマの場合のみ下部に配置されたツールバー。
tabbarbooleanfalseツールバーがタブバーでもあるかどうかを定義します。
iconsbooleanfalseアイコン付きのタブバーを有効にします（tabbar: trueの場合のみ影響します）。
scrollablebooleanfalseスクロール可能なタブバーを有効にします（tabbar: trueの場合のみ影響します）。
outlinebooleantrueiOSテーマの場合、ツールバー/タブバーの上部に薄い境界線（ヘアライン）を追加します。
hiddenbooleanfalseツールバーを非表示にします。

ツールバーのメソッド

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

ツールバーのイベント

イベント説明
<Toolbar> イベント
toolbarHideツールバーが非表示になったときにイベントがトリガーされます。
toolbarShowツールバーが表示されたときにイベントがトリガーされます。

ツールバースロット

ツールバー React コンポーネント（<Toolbar>）には、カスタム要素用の追加スロットがあります。

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

例

ツールバー

toolbar-tabbar.jsx
import React, { useState } from 'react';
import {
  Navbar,
  Page,
  Toolbar,
  List,
  ListItem,
  Button,
  Link,
  BlockTitle,
  Block,
} from 'framework7-react';

export default () => {
  const [toolbarPosition, setToolbarPosition] = useState('bottom');

  const toggleToolbarPosition = () => {
    setToolbarPosition(toolbarPosition === 'top' ? 'bottom' : 'top');
  };

  return (
    <Page>
      <Navbar title="Toolbar & Tabbar"></Navbar>
      <Toolbar position={toolbarPosition}>
        <Link>Left Link</Link>
        <Link>Right Link</Link>
      </Toolbar>
      {/* example-hidden-start */}
      <List insetMd strong dividersIos outlineIos className="example-hidden">
        <ListItem link="./tabbar/" title="Tabbar" />
        <ListItem link="./tabbar-icons/" title="Tabbar With Icons" />
        <ListItem link="./tabbar-scrollable/" title="Tabbar Scrollable" />
        <ListItem link="./toolbar-hide-scroll/" title="Hide Toolbar On Scroll" />
      </List>
      {/* example-hidden-end */}
      <BlockTitle>Toolbar Position</BlockTitle>
      <Block>
        <p>
          Toolbar supports both top and bottom positions. Click the following button to change its
          position.
        </p>
        <p>
          <Button
            fill
            onClick={() => {
              toggleToolbarPosition();
            }}
          >
            Toggle Toolbar Position
          </Button>
        </p>
      </Block>
    </Page>
  );
};

タブバー

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

export default () => {
  const [toolbarPosition, setToolbarPosition] = useState('bottom');

  const toggleToolbarPosition = () => {
    setToolbarPosition(toolbarPosition === 'top' ? 'bottom' : 'top');
  };

  return (
    <Page pageContent={false}>
      <Navbar title="Tabbar">
        <NavRight>
          <Link
            iconMd="material:compare_arrows"
            iconIos="f7:arrow_up_arrow_down_circle_fill"
            onClick={() => {
              toggleToolbarPosition();
            }}
          ></Link>
        </NavRight>
      </Navbar>
      <Toolbar tabbar position={toolbarPosition}>
        <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>
  );
};

タブバーアイコン

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

export default () => {
  const [toolbarPosition, setToolbarPosition] = useState('bottom');

  const toggleToolbarPosition = () => {
    setToolbarPosition(toolbarPosition === 'top' ? 'bottom' : 'top');
  };

  return (
    <Page pageContent={false}>
      <Navbar title="Tabbar Icons">
        <NavRight>
          <Link
            iconMd="material:compare_arrows"
            iconIos="f7:arrow_up_arrow_down_circle_fill"
            onClick={() => {
              toggleToolbarPosition();
            }}
          />
        </NavRight>
      </Navbar>
      <Toolbar tabbar icons position={toolbarPosition}>
        <Link
          tabLink="#tab-1"
          tabLinkActive
          text="Tab 1"
          iconIos="f7:envelope_fill"
          iconMd="material:email"
        />
        <Link tabLink="#tab-2" text="Tab 2" iconIos="f7:calendar_fill" iconMd="material:today" />
        <Link
          tabLink="#tab-3"
          text="Tab 3"
          iconIos="f7:cloud_upload_fill"
          iconMd="material:file_upload"
        />
      </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>
  );
};

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

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

export default () => {
  const [toolbarPosition, setToolbarPosition] = useState('bottom');

  const toggleToolbarPosition = () => {
    setToolbarPosition(toolbarPosition === 'top' ? 'bottom' : 'top');
  };

  const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  return (
    <Page pageContent={false}>
      <Navbar title="Tabbar Scrollable">
        <NavRight>
          <Link
            iconMd="material:compare_arrows"
            iconIos="f7:arrow_up_arrow_down_circle_fill"
            onClick={() => {
              toggleToolbarPosition();
            }}
          ></Link>
        </NavRight>
      </Navbar>
      <Toolbar tabbar scrollable position={toolbarPosition}>
        {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. 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>
            </Block>
          </Tab>
        ))}
      </Tabs>
    </Page>
  );
};

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

toolbar-hide-scroll.jsx
import React from 'react';
import { Navbar, Page, Toolbar, Link, Block } from 'framework7-react';

export default () => (
  <Page hideToolbarOnScroll>
    <Navbar title="Hide Toolbar On Scroll"></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. 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>
    </Block>
  </Page>
);
このドキュメントを改善する
このページについて