Toolbar Svelte Component (ツールバー・Svelte・コンポーネント)

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

Toolbar Svelteコンポーネントは、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	ツールバーが表示されるとイベントが発生します。

ツールバーのスロット

Toolbar Svelteコンポーネント(<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>
  <!-- デフォルトのスロットに移動します。 -->
  <Link>Left Link</Link>
  <Link>Right Link</Link>
</Toolbar>

<!-- レンダリングされます。 -->

<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

ツールバー

<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 fill onClick={() => isBottom = !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>
<script>
  import {Page, Navbar, Toolbar, Link, BlockTitle, Block, Button} from 'framework7-svelte';

  let isBottom = true;
</script>

タブバー

<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={() => isBottom = !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" 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 {Page, Navbar, Toolbar, Link, BlockTitle, Block, NavRight, Tabs, Tab } from 'framework7-svelte';

  let isBottom = true;
</script>

タブバーのラベル

<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={() => isBottom = !isBottom} />
    </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 tabLink="#tab-2" text="Tab 2" iconIos="f7:calendar_fill" iconAurora="f7:calendar_fill" iconMd="material:today" />
    <Link tabLink="#tab-3" text="Tab 3" iconIos="f7:cloud_upload_fill" iconAurora="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 {Page, Navbar, Toolbar, Link, BlockTitle, Block, NavRight, Tabs, Tab } from 'framework7-svelte';

  let isBottom = true;
</script>

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

<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={() => isBottom = !isBottom}></Link>
    </NavRight>
  </Navbar>

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

  <Tabs>
    {#each tabs as tab, index (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. 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>
    {/each}
  </Tabs>
</Page>
<script>
  import { Page, Navbar, Toolbar, Link, BlockTitle, Block, NavRight, Tabs, Tab } from 'framework7-svelte';

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

  let isBottom = true;
</script>

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

<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>
<script>
  import { Page, Navbar, Toolbar, Link, BlockTitle, Block, NavRight } from 'framework7-svelte';
</script>