工具列 Svelte 元件

<script>
  import {
    Navbar,
    Page,
    Toolbar,
    List,
    ListItem,
    Button,
    Link,
    BlockTitle,
    Block,
  } from 'framework7-svelte';

  let toolbarPosition = 'bottom';

  function toggleToolbarPosition() {
    toolbarPosition = toolbarPosition === 'top' ? 'bottom' : 'top';
  }
</script>

<Page>
  <Navbar title="Toolbar & Tabbar" />
  <Toolbar position={toolbarPosition}>
    <Link>Left Link</Link>
    <Link>Right Link</Link>
  </Toolbar>
  <!-- example-hidden-start -->
  <List insetMd strong dividersIos outlineIos class="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>

<script>
  import { Navbar, Page, Block, Tabs, Tab, Link, Toolbar, NavRight } from 'framework7-svelte';

  let toolbarPosition = 'bottom';

  function toggleToolbarPosition() {
    toolbarPosition = toolbarPosition === 'top' ? 'bottom' : 'top';
  }
</script>

<Page pageContent={false}>
  <Navbar title="Tabbar">
    <NavRight>
      <Link
        iconMd="material:compare_arrows"
        iconIos="f7:arrow_up_arrow_down_circle_fill"
        icon="f7:arrow_up_arrow_down_circle_fill"
        onClick={toggleToolbarPosition}
      />
    </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" class="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" class="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" class="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>

<script>
  import { Navbar, Page, Block, Tabs, Tab, Link, Toolbar, NavRight } from 'framework7-svelte';

  let toolbarPosition = 'bottom';

  function toggleToolbarPosition() {
    toolbarPosition = toolbarPosition === 'top' ? 'bottom' : 'top';
  }
</script>

<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" class="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" class="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" class="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>

<script>
  import { Navbar, Page, Block, Tabs, Tab, Link, Toolbar, NavRight } from 'framework7-svelte';

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

  function toggleToolbarPosition() {
    toolbarPosition = toolbarPosition === 'top' ? 'bottom' : 'top';
  }
</script>

<Page pageContent={false}>
  <Navbar title="Tabbar Scrollable">
    <NavRight>
      <Link
        iconMd="material:compare_arrows"
        iconIos="f7:arrow_up_arrow_down_circle_fill"
        onClick={toggleToolbarPosition}
      />
    </NavRight>
  </Navbar>
  <Toolbar tabbar scrollable position={toolbarPosition}>
    {#each tabs as tab, index}
      <Link tabLink={`#tab-${tab}`} tabLinkActive={index === 0}>Tab {tab}</Link>
    {/each}
  </Toolbar>
  <Tabs>
    {#each tabs as tab, index}
      <Tab id={`tab-${tab}`} class="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>
    {/each}
  </Tabs>
</Page>

<script>
  import { Navbar, Page, Toolbar, Link, Block } from 'framework7-svelte';
</script>

<Page hideToolbarOnScroll>
  <Navbar title="Hide Toolbar On Scroll" />
  <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>