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

Tabs Svelte コンポーネント

タブを使用すると、異なるコンテンツを簡単に切り替えることができます。 Tabs Svelte コンポーネントは、タブコンポーネントを表します。

タブコンポーネント

次のコンポーネントが含まれています

タブのプロパティ

プロパティ型説明
<Tabs> プロパティ
animatedbooleanアニメーション付きタブを有効にします
swipeablebooleanスワイプ可能なタブを有効にします
routablebooleanルーティング可能なタブを有効にします
swiperParamsobjectSwiper パラメーターを持つオブジェクト（swipeable が有効な場合に適用）
<Tab> プロパティ
tabActiveboolean現在アクティブ/表示されているタブを定義します
idstringタブID

タブメソッド

<Tab> メソッド
.show(animate)このタブを表示します

タブイベント

イベント説明
<Tab> イベント
tabShowタブが表示/アクティブになるとトリガーされるイベント
tabHideタブが非表示/非アクティブになるとトリガーされるイベント

タブの切り替え

タブを制御/切り替えることができます

例

静的タブ

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

<Page pageContent={false}>
  <Navbar title="Static Tabs" />
  <Toolbar bottom tabbar>
    <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>

アニメーション付きタブ

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

<Page pageContent={false}>
  <Navbar title="Animated Tabs" />
  <Toolbar bottom tabbar>
    <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
    <Link tabLink="#tab-2">Tab 2</Link>
    <Link tabLink="#tab-3">Tab 3</Link>
  </Toolbar>
  <Tabs animated>
    <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>

スワイプ可能なタブ

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

<Page pageContent={false}>
  <Navbar title="Swipeable Tabs" />
  <Toolbar bottom tabbar>
    <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
    <Link tabLink="#tab-2">Tab 2</Link>
    <Link tabLink="#tab-3">Tab 3</Link>
  </Toolbar>
  <Tabs swipeable>
    <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>
このドキュメントを改善する
このページについて