タブ

タブを使用すると、異なるコンテンツ間を簡単に切り替えることができます。

タブレイアウト

タブのレイアウトを見てみましょう

<!-- Tabs wrapper, shoud have "tabs" class. Required element -->
<div class="tabs">
  <!-- First tab, should have "tab" class and unique id attribute -->
  <!-- First tab is active by default - additional "tab-active" class -->
  <div class="tab tab-active" id="tab1">
    ... Tab 1 content goes here ...
  </div>
  <!-- Second tab, should have "tab" class and unique id attribute -->
  <div class="tab" id="tab2">
    ... Tab 2 content goes here ...
  </div>
  <!-- Third tab, should have "tab" class and unique id attribute -->
  <div class="tab" id="tab3">
    ... Tab 3 content goes here ...
  </div>
</div>

場所

div class="tabs" - すべてのタブに必要なラッパーです。この要素がないと、タブは機能しません!
div class="tab" - 単一のタブ。**一意の** id 属性が必要です
div class="tab tab-active" - アクティブな単一のタブ。デフォルトでアクティブ（表示）になっているタブには、追加の tab-active クラスが必要です

スクロール可能なタブ

スクロール可能な <div class="page-content"> 内にタブを配置すると、相互スクロールが行われます。つまり、1 つのタブをスクロールすると、すべてのタブもスクロールされます。これを回避するには（該当する場合）、各タブを page-content として作成することをお勧めします。この場合、各タブは独自のスクロールを持ちます

<div class="page">
  <div class="navbar">...</div>
  <!-- tabs is a direct child of page -->
  <div class="tabs">
    <!-- each tabs is a "page-content" -->
    <div class="page-content tab tab-active" id="tab1">
      ... Tab 1 content goes here ...
    </div>
    <div class="page-content tab" id="tab2">
      ... Tab 2 content goes here ...
    </div>
    <!-- Third tab, should have "tab" class and unique id attribute -->
    <div class="page-content tab" id="tab3">
      ... Tab 3 content goes here ...
    </div>
  </div>
</div>

タブ間の切り替え

タブレイアウトを作成した後、ユーザーがタブを切り替えるためのコントローラーが必要です。

そのためには、tab-link クラスと、ターゲットタブの id 属性と同じ href 属性を持つリンク (<a> タグ) を作成する必要があります

<!-- Link that activates first tab, has the same href attribute (#tab1) as the id attribute of first tab (tab1)  -->
<a href="#tab1" class="tab-link tab-link-active">Tab 1</a>

<!-- Link that activates 2nd tab, has the same href attribute (#tab2) as the id attribute of 2nd tab (tab2)  -->
<a href="#tab2" class="tab-link">Tab 2</a>

<!-- Link that activates 3rd tab, has the same href attribute (#tab2) as the id attribute of 3rd tab (tab3)  -->
<a href="#tab3" class="tab-link">Tab 3</a>

ご覧のとおり、最初のリンクには tab-link-active クラスもあります。これは必須ではありませんが、そのようなすべてのリンクが同じ DOM ツリーレベル（共通の親の同じレベルの子）にある場合、スクリプトはアクティブなタブに関連するリンクの tab-link-active クラスも変更します。「アクティブな」リンクの視覚スタイルが異なる場合（セグメント化されたコントロールのボタンやタブバーのリンクなど）に役立ちます

複数のタブの切り替え

上記のような表記法では、ID 属性を使用して切り替えるタブを指定します。ただし、1 つの tab-link を使用して複数のタブを切り替える必要がある場合があります。この場合は、ID の代わりにクラスを使用し、tab-link に data-tab 属性を使用できます。例えば

<!-- Top Tabs -->
<div class="tabs tabs-top">
  <div class="tab tab1 tab-active">...</div>
  <div class="tab tab2">...</div>
  <div class="tab tab3">...</div>
</div>
<!-- Bottom Tabs -->
<div class="tabs tabs-bottom">
  <div class="tab tab1 tab-active">...</div>
  <div class="tab tab2">...</div>
  <div class="tab tab3">...</div>
</div>
<!-- Tabs links -->
<div>
  <!-- This links will switch top and bottom tabs to .tab1 -->
  <a href="#" class="tab-link tab-link-active" data-tab=".tab1">Tab 1</a>
  <!-- This links will switch top and bottom tabs to .tab2 -->
  <a href="#" class="tab-link" data-tab=".tab2">Tab 2</a>
  <!-- This links will switch top and bottom tabs to .tab3 -->
  <a href="#" class="tab-link" data-tab=".tab3">Tab 3</a>
</div>

ここで、tab-link の data-tab 属性は、ターゲットタブ / タブの CSS セレクターとなります

ビューをタブとして

単一のタブが、独自のナビゲーションとレイアウトを持つ個別のビューにならないのはなぜでしょうか？可能です。ビューをタブとして切り替えることができます。この場合、各タブが個別のビューを表す、タブ付きアプリ構造のようなものができます

<body>
  <!-- App root -->
  <div id="app">
    <!-- Views/Tabs container -->
    <div class="views tabs">
      <!--
        Tabbar for switching views-tabs. Should be a first child in Views.
        Additional "toolbar-bottom" class to set it on bottom
      -->
      <div class="toolbar tabbar toolbar-bottom">
        <div class="toolbar-inner">
          <a href="#view-home" class="tab-link tab-link-active">
            <i class="icon icon-home"></i>
          </a>
          <a href="#view-catalog" class="tab-link">
            <i class="icon icon-catalog"></i>
          </a>
          <a href="#view-settings" class="tab-link">
            <i class="icon icon-settings"></i>
          </a>
        </div>
      </div>
      <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
      <div id="view-home" class="view view-main tab tab-active">
        ...
      </div>

      <!-- Catalog View -->
      <div id="view-catalog" class="view tab">
        ...
      </div>

      <!-- Settings View -->
      <div id="view-settings" class="view tab">
        ...
      </div>
    </div>
  </div>
  ...
</body>

アニメーションタブ

単純なトランジションでタブを切り替えることも可能です。これには、div class="tabs" のための追加の div class="tabs-animated-wrap" ラッパーが必要です

<!-- Tabs animated wrapper, required to switch tabs with transition -->
<div class="tabs-animated-wrap">

  <!-- Tabs, tabs wrapper -->
  <div class="tabs">
    <!-- Tab 1, active by default -->
    <div id="tab1" class="tab tab-active">
      ... Tab 1 content ...
    </div>

    <!-- Tab 2 -->
    <div id="tab2" class="tab">
      ... Tab 2 content ...
    </div>

    <!-- Tab 3 -->
    <div id="tab3" class="tab">
      ... Tab 3 content ...
    </div>
  </div>
</div>

アニメーションタブのラッパー div class="tabs-animated-wrap" は、**固定の高さ**を持つ必要があることに注意してください。デフォルトでは、親の高さの 100% です

スワイプ可能なタブ

スワイプでタブを切り替えることも可能です。これには、Swiper Element (Framework7 の一部) を使用する必要があります。

この例では、タブリンクをサブナビゲーションバーに配置し、各タブのスクロール位置を個別に保持するために、**page-content** を **tab** として使用します

<!-- Swiper Element should be used as Tabs -->
<swiper-container class="tabs">
  <!-- Each Tab must be a "swiper-slide" element -->

  <!-- Tab 1, active by default -->
  <swiper-slide id="tab1" class="tab tab-active">
    ... Tab 1 content ...
  </swiper-slide>
  <!-- Tab 2 -->
  <swiper-slide id="tab2" class="tab">
    ... Tab 2 content ...
  </swiper-slide>
  <!-- Tab 3 -->
  <swiper-slide id="tab3" class="tab">
    ... Tab 3 content ...
  </swiper-slide>
</swiper-container>

タブアプリメソッド

次のアプリメソッドを使用してタブを制御できます

app.tab.show(tabEl, animate)

tabEl - 表示するタブの HTMLElement または string (CSS セレクター)。必須
animate - boolean - アニメーション付きで表示するか、アニメーションなしで表示するか (アニメーションタブまたはスワイプ可能タブの場合)。 *オプション*
このメソッドは、表示されたタブと非表示のタブの HTML 要素を持つ newTabEl および oldTabEl プロパティを持つオブジェクトを返します

app.tab.show(tabEl, tabLinkEl, animate)

tabEl - 表示するタブの HTMLElement または string (CSS セレクター)。必須
tabLinkEl - このタブでアクティブにするタブリンク/ボタンの HTMLElement または string (CSS セレクター)。複雑なレイアウトで Framework7 にどのタブリンク/ボタンをアクティブにするかを指示する場合に役立ちます
animate - boolean - アニメーション付きで表示するか、アニメーションなしで表示するか (アニメーションタブまたはスワイプ可能タブの場合)。 *オプション*
このメソッドは、表示されたタブと非表示のタブの HTML 要素を持つ newTabEl および oldTabEl プロパティを持つオブジェクトを返します

タブイベント

タブは、タブ要素で次の DOM イベントを発生させ、アプリインスタンスでイベントを発生させます

DOM イベント

イベント	ターゲット	説明
tab:show	タブ要素<div class="tab">	タブが表示/アクティブになったときにイベントがトリガーされます
tab:hide	タブ要素<div class="tab">	タブが非表示/非アクティブになったときにイベントがトリガーされます
page:tabshow	ページ要素<div class="page">	ページの親ビューがタブとして表示されたときにイベントがトリガーされます
page:tabhide	ページ要素<div class="page">	ページの親ビューがタブとして非表示になったときにイベントがトリガーされます

アプリインスタンスイベント

アプリインスタンスイベントもあります

イベント	引数	ターゲット	説明
tabShow	tabEl	app	タブが表示/アクティブになったときにイベントがトリガーされます。引数として、イベントハンドラーは表示されたタブを受け取ります
tabHide	tabEl	app	タブが非表示/非アクティブになったときにイベントがトリガーされます。引数として、イベントハンドラーは非表示になったタブを受け取ります
pageTabShow	pageEl	app	ページの親ビューがタブとして表示されたときにイベントがトリガーされます。引数として、イベントハンドラーは、表示されたビュータブの子であるページ要素を受け取ります
pageTabHide	pageEl	app	ページの親ビューがタブとして非表示になったときにイベントがトリガーされます。引数として、イベントハンドラーは、非表示になったビュータブの子であるページ要素を受け取ります

ルーティング可能なタブ

タブはルーティング可能です。ルーティング可能なタブとはどういう意味で、なぜそれが良いのでしょうか？

まず第一に、いわゆる特別なタブリンクの代わりに、通常のリンクでタブに移動することができます。
第二に、そのようなタブのルートに移動するときに、必要なタブが開いたページを読み込むことができます。
第三に、ブラウザの履歴が有効になっている場合、履歴で戻る/進むと、同じタブが開かれます。
最後に、ルーティング可能なタブを使用すると、ページと同じ方法でタブコンテンツを読み込むことができます。つまり、url、content、component、または componentUrl を使用します

まず、アプリのルートでタブのルートを指定する必要があります。/tabs/ ルートにルーティング可能なタブを持つページがあると仮定しましょう

routes = [
  {
    // Page main route
    path: '/tabs/',
    // Will load page from tabs/index.html file
    url: './pages/tabs/index.html',
    // Pass "tabs" property to route, must be array with tab routes:
    tabs: [
      // First (default) tab has the same url as the page itself
      {
        // Tab path
        path: '/',
        // Tab id
        id: 'tab-1',
        // Fill this tab content from content string
        content: `
          <div class="block">
            <h3>About Me</h3>
            <p>...</p>
          </div>
        `
      },
      // Second tab
      {
        path: '/tab-2/',
        id: 'tab-2',
        // Fill this tab content with Ajax request:
        url: './pages/tabs/tab-2.html',
      },
      // Third tab
      {
        path: '/tab-3/',
        id: 'tab-3',
        // Load this tab content as a component with Ajax request:
        componentUrl: './pages/tabs/tab-3.html',
      },
    ],
  }
]

/tabs/index.html ページには、たとえば、次の構造があります

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Routable Tabs</div>
    </div>
  </div>
  <div class="toolbar tabbar toolbar-bottom">
    <div class="toolbar-inner">
      <!-- additional "data-route-tab-id" must match to tab's ID in the specified routes -->
      <a href="/" class="tab-link" data-route-tab-id="tab-1">Tab 1</a>
      <a href="/tab-2/" class="tab-link" data-route-tab-id="tab-2">Tab 2</a>
      <a href="/tab-3/" class="tab-link" data-route-tab-id="tab-3">Tab 3</a>
    </div>
  </div>
  <!-- Additional "tabs-routable" is required on tabs -->
  <div class="tabs tabs-routable">
    <div class="tab page-content" id="tab-1"></div>
    <div class="tab page-content" id="tab-2"></div>
    <div class="tab page-content" id="tab-3"></div>
  </div>
</div>

通常のタブとほとんど同じですが、タブリンクとタブに「tab-link-active」と「tab-active」クラスがなくなった点が異なります。これらのクラスとタブはルーターによって切り替えられます。そして、新しい属性とクラスがあります

data-route-tab-id - タブスイッチャーが必要なルートに関連するリンクを理解するために必要な追加のタブリンク属性
tabs-routable - tabs 要素に必要な追加クラス

ビューはルーティング可能なタブとして使用できないことに注意してください。ルーティング可能なタブは、ビュー/ルーター内でのみ使用できます！

ルーティング可能なタブイベント

ルーターは、ルーティング可能なタブコンテンツがロードされると、タブ要素で次の DOM イベントを発生させ、ルーター/ビュー/アプリインスタンスでイベントを発生させます

DOM イベント

イベント	ターゲット	説明
tab:init tab:mounted	タブ要素<div class="tab">	ルーティング可能なタブコンテンツがロードされた直後にイベントがトリガーされます
tab:beforeremove	タブ要素<div class="tab">	ルーティング可能なタブコンテンツが削除される直前にイベントがトリガーされます

ルーターインスタンスイベント

ルーターインスタンスは、セルフインスタンス、その親 view インスタンス、および app インスタンスの両方でイベントを発行します

イベント	ターゲット	引数	説明
tabInit tabMounted	router view app	(newTabEl, tabRoute)	ルーティング可能なタブコンテンツがロードされた直後にイベントがトリガーされます。引数として、イベントハンドラーは以下を受け取ります `newTabEl` - ルートコンテンツがロードされたタブ HTML 要素 (新しいタブ) `tabRoute` - 新しいタブルート
tabBeforeRemove	router view app	(oldTabEl, newTabEl, tabRoute)	ルーティング可能なタブコンテンツが削除される直前にイベントがトリガーされます。引数として、イベントハンドラーは以下を受け取ります `oldTabEl` - ルートコンテンツが削除されたタブ HTML 要素 (古いタブ) `newTabEl` - ルートコンテンツがロードされたタブ HTML 要素 (新しいタブ) `tabRoute` - 新しいタブルート

例

tabs-static.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Static Tabs</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
      <a href="#tab-2" class="tab-link">Tab 2</a>
      <a href="#tab-3" class="tab-link">Tab 3</a>
    </div>
  </div>
  <div class="tabs">
    <div id="tab-1" class="page-content tab tab-active">
      <div class="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>
      </div>
    </div>
    <div id="tab-2" class="page-content tab">
      <div class="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>
      </div>
    </div>
    <div id="tab-3" class="page-content tab">
      <div class="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>
      </div>
    </div>
  </div>
</div>

アニメーションタブ

tabs-animated.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Animated Tabs</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
      <a href="#tab-2" class="tab-link">Tab 2</a>
      <a href="#tab-3" class="tab-link">Tab 3</a>
    </div>
  </div>
  <div class="tabs-animated-wrap">
    <div class="tabs">
      <div id="tab-1" class="page-content tab tab-active">
        <div class="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>
        </div>
      </div>
      <div id="tab-2" class="page-content tab">
        <div class="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>
        </div>
      </div>
      <div id="tab-3" class="page-content tab">
        <div class="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>
        </div>
      </div>
    </div>
  </div>
</div>

スワイプ可能なタブ

tabs-swipeable.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Swipeable Tabs</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
      <a href="#tab-2" class="tab-link">Tab 2</a>
      <a href="#tab-3" class="tab-link">Tab 3</a>
    </div>
  </div>
  <swiper-container class="tabs">
    <swiper-slide id="tab-1" class="page-content tab tab-active">
      <div class="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>
      </div>
    </swiper-slide>
    <swiper-slide id="tab-2" class="page-content tab">
      <div class="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>
      </div>
    </swiper-slide>
    <swiper-slide id="tab-3" class="page-content tab">
      <div class="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>
      </div>
    </swiper-slide>
  </swiper-container>
</div>

ルーティング可能なタブ

var app = new Framework7({
  routes: [
    {
      path: '/',
      id: 'tab1',
      content: `
        <div class="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>
        </div>
      `,
    },
    {
      path: '/tab2/',
      id: 'tab2',
      content: `
        <div class="block">
          <p>Tab 2 content</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>
        </div>
      `,
    },
    {
      path: '/tab3/',
      id: 'tab3',
      content: `
        <div class="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>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>
        </div>
      `,
    },
  ]
});

tabs-routable.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Tabs Routable</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="./" class="tab-link" data-route-tab-id="tab1">Tab 1</a>
      <a href="tab2/" class="tab-link" data-route-tab-id="tab2">Tab 2</a>
      <a href="tab3/" class="tab-link" data-route-tab-id="tab3">Tab 3</a>
    </div>
  </div>
  <div class="tabs tabs-routable">
    <div class="page-content tab" id="tab1"></div>
    <div class="page-content tab" id="tab2"></div>
    <div class="page-content tab" id="tab3"></div>
  </div>
</div>

このドキュメントを改善する

このページについて

タブレイアウト

スクロール可能なタブ

タブ間の切り替え
複数のタブの切り替え
ビューをタブとして
アニメーションタブ
スワイプ可能なタブ
タブアプリメソッド
タブイベント

DOM イベント
アプリインスタンスイベント

ルーティング可能なタブ

ルーティング可能なタブイベント

アニメーションタブ
スワイプ可能なタブ
ルーティング可能なタブ