🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

Toolbar Svelte Component

Toolbar is a fixed (with Fixed and Through layout types) area at the bottom of a screen that contains navigation elements. Toolbar does not have any parts, just plain links inside

Toolbar Svelte component represents Toolbar component.

Toolbar Components

There are following components included:

Toolbar Properties

PropTypeDefaultDescription
<Toolbar> properties
innerbooleantrueWhen enabled (by default), it will put all the content within internal toolbarInner element. Disable it only in case you want to put totally custom layout inside
positionstringToolbar position, can be top or bottom
topbooleanTop positioned toolbar. Shortening for position="top"
topIosbooleanTop positioned toolbar only for iOS theme
topMdbooleanTop positioned toolbar only for MD theme
bottombooleanBottom positioned toolbar. Shortening for position="bottom"
bottomIosbooleanBottom positioned toolbar only for iOS theme
bottomMdbooleanBottom positioned toolbar only for MD theme
tabbarbooleanfalseDefines whether the Toolbar is also a Tabbar or not
iconsbooleanfalseEnables Tabbar with icons (affects only when tabbar: true)
scrollablebooleanfalseEnables scrollable Tabbar (affects only when tabbar: true)
outlinebooleantrueAdds toolbar/tabbar top thin border (hairline) for iOS theme
hiddenbooleanfalseMakes toolbar hidden

Toolbar Methods

<Toolbar> methods
.hide(animate)Hide toolbar
.show(animate)Show toolbar

Toolbar Events

EventDescription
<Toolbar> events
toolbarHideEvent will be triggered when Toolbar becomes hidden
toolbarShowEvent will be triggered when Toolbar becomes visible

Toolbar Slots

Toolbar Svelte component (<Toolbar>) has additional slots for custom elements:

<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

Toolbar

toolbar-tabbar.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>

Tabbar

tabbar.svelte
<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>

Tabbar Icons

tabbar-icons.svelte
<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>

Tabbar Scrollable

tabbar-scrollable.svelte
<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>

Hide Toolbar On Scroll

toolbar-hide-scroll.svelte
<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>