タブ

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

タブのレイアウト

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

<!-- タブのラッパーは、"tabs "クラスを持つ必要があります。必須要素 -->
<div class="tabs">
  <!-- 最初のタブ。"tab" クラスとユニークな id 属性を持つ必要があります。 -->
  <!-- 最初のタブは、デフォルトでアクティブになっているので、"tab-active" クラスを追加します。 -->
  <div class="tab tab-active" id="tab1">
    ... Tab 1 content goes here ...
  </div>
  <!-- 2つ目のタブは、"tab "クラスとユニークなid属性を持つ必要があります。 -->
  <div class="tab" id="tab2">
    ... Tab 2 content goes here ...
  </div>
  <!-- 3つ目のタブは、"tab "クラスとユニークなid属性を持つ必要があります。 -->
  <div class="tab" id="tab3">
    ... Tab 3 content goes here ...
  </div>
</div>

構造

div class="tobs" - すべてのタブに必要なラッパーです。この要素がないと、タブは機能しません。
div class="tab" - 単一のタブ。unique id 属性を持つ必要があります。
div class="tab-active" - 単一のアクティブなタブです。デフォルトでアクティブなタブは、追加で tab-active クラスを持ちます。

スクロール可能なタブ

スクロール可能な <div class="page-content"> の中にタブを配置すると、相互にスクロールしてしまいます。これを避けるためには（もしそうであれば）、それぞれのタブをページコンテンツにして、それぞれのタブが独自にスクロールするようにすることをお勧めします。

<div class="page">
  <div class="navbar">...</div>
  <!-- タブはページの直接の子である -->
  <div class="tabs">
    <!-- 各タブは "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>
    <!-- 3つ目のタブは、"tab "クラスとユニークなid属性を持つ必要があります。 -->
    <div class="page-content tab" id="tab3">
      ... Tab 3 content goes here ...
    </div>
  </div>
</div>

タブの切り替え

タブのレイアウトが完成したら、ユーザーがタブを切り替えられるようにするためのコントラクターが必要です。

これを実現するためには、tab-link クラスと、対象となるタブの id 属性と同じ href 属性を持つリンク (<a> タグ) を作成する必要があります。

<!-- 最初のタブをアクティブにするリンクは、最初のタブ(tab1)のid属性と同じhref属性(#tab1)を持ちます。  -->
<a href="#tab1" class="tab-link tab-link-active">Tab 1</a>

<!-- 2番目のタブをアクティブにするリンクは、2番目のタブ(tab2)のid属性と同じhref属性(#tab2)を持ちます。  -->
<a href="#tab2" class="tab-link">Tab 2</a>

<!-- 第3タブを起動するリンクは、第3タブのid属性と同じhref属性(#tab2)を持つ(tab3)  -->
<a href="#tab3" class="tab-link">Tab 3</a>

ご覧の通り、最初のリンクは tab-link-active クラスを持っています。これは必須ではありませんが、もしこのようなリンクがすべて同じDOMツリーレベル（相互の親の同じレベルの子）にある場合、スクリプトはアクティブなタブに関連するリンクにもこの tab-link-active クラスを変更します。これは、「アクティブ」なリンクのビジュアルスタイルが異なる場合に便利です (Segmented Control のボタンや Tabbar のリンクのように)。

複数のタブの切り替え

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

<!-- 上のタブ -->
<div class="tabs tabs-top">
  <div class="tab tab1 tab-active">...</div>
  <div class="tab tab2">...</div>
  <div class="tab tab3">...</div>
</div>
<!-- 下のタブ -->
<div class="tabs tabs-bottom">
  <div class="tab tab1 tab-active">...</div>
  <div class="tab tab2">...</div>
  <div class="tab tab3">...</div>
</div>
<!-- タブのリンク -->
<div>
  <!-- このリンクは、上部と下部のタブを .tab1 に切り替えます。 -->
  <a href="#" class="tab-link tab-link-active" data-tab=".tab1">Tab 1</a>
  <!-- このリンクは、上部と下部のタブを .tab2 に切り替えます。 -->
  <a href="#" class="tab-link" data-tab=".tab2">Tab 2</a>
  <!-- このリンクは、上部と下部のタブを .tab3 に切り替えます。 -->
  <a href="#" class="tab-link" data-tab=".tab3">Tab 3</a>
</div>

タブリンクの data-tab 属性に、対象となるタブ/タブの CSS セレクタを指定します。

タブとしてのビュー

なぜ一つのタブが、独自のナビゲーションとレイアウトを持つ独立したビューにならないのでしょうか？それは、ビューをタブとして切り替えることができるからです。今回のケースでは、各タブが独立したビューを表す、一種のタブ型アプリの構造になります。

<body>
  <!-- アプリルート -->
  <div id="app">
    <!-- ビュー/タブコンテナ -->
    <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>
      <!-- メインのビュー/タブは、"view-main "クラスを持つべきです。また、"tab-active "クラスもあります。 -->
      <div id="view-home" class="view view-main tab tab-active">
        ...
      </div>

      <!-- カタログビュー -->
      <div id="view-catalog" class="view tab">
        ...
      </div>

      <!-- 設定ビュー -->
      <div id="view-settings" class="view tab">
        ...
      </div>
    </div>
  </div>
  ...
</body>

タブのアニメーション

シンプルなトランジションでタブを切り替えることもできます。そのためには、div class="tobs"のラッパーとしてdiv class="tobs-animated-wrap"を追加する必要があります。

<!-- トランジションでタブを切り替えるために必要なタブのアニメーションラッパー -->
<div class="tabs-animated-wrap">

  <!-- タブ、タブのラッパー -->
  <div class="tabs">
    <!-- タブ1（デフォルトで有効 -->
    <div id="tab1" class="tab tab-active">
      ... Tab 1 content ...
    </div>

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

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

アニメーションするタブのラッパー div class="tabs-animated-wrap" は、固定の高さを持たなければならないことに注意してください。デフォルトでは、親の高さの100%になっています。

スワイプ可能なタブ

スワイプでタブを切り替えられるようにすることもできます。そのためには、div class="tobs"のラッパーとして、div class="tobs-swipeable-wrap"を追加する必要があります。

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

<!-- スワイプでタブを切り替えるために必要な、タブのスワイプ可能なラッパー -->
<div class="tabs-swipeable-wrap">
  <!-- タブ、タブ用ラッパー -->
  <div class="tabs">
    <!-- タブ1 (デフォルトで有効) -->
    <div id="tab1" class="tab tab-active">
      ... Tab 1 content ...
    </div>
    <!-- タブ2 -->
    <div id="tab2" class="tab">
      ... Tab 2 content ...
    </div>
    <!-- タブ 3 -->
    <div id="tab3" class="tab">
      ... Tab 3 content ...
    </div>
  </div>
</div>

スワイプ可能な効果を得るために、スワイプ可能なタブは実際にはSwiperに変換されるので、data-属性を使ってSwiperパラメータを渡すことで、その動作を微調整することが可能です。

タブアプリのメソッド

以下のアプリのメソッドを使って、タブを制御することができます。

app.tab.show(tabEl, animate)

tabEl - 表示するタブのHTMLElementまたはstring（CSSセレクタ付き）。必須
animate - boolean - アニメーションを使って表示するかどうか（アニメーションやスワイプ可能なタブの場合）。Optional
このメソッドは newTabEl と oldTabEl プロパティを持つオブジェクトを、表示されているタブと隠されているタブの HTML 要素とともに返します。

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

tabEl - 表示するタブの HTMLElement または string (CSS セレクタ付き) を指定します。必須
tabLinkEl - HTMLElement または string (with CSS Selector) of Tab link/button to be activated with this tab. 複雑なレイアウトをしている場合に、どのタブのリンクやボタンを有効にするかをFramework7に伝えるのに便利です。
animate - boolean - アニメーションで見えるようにするかどうか（アニメーションやスワイプ可能なタブの場合）。Optional
このメソッドは newTabEl と oldTabEl プロパティを持つオブジェクトを、表示されているタブと隠されているタブの HTML 要素とともに返します。

タブのイベント

Tabs では、以下の DOM イベントがタブ要素やアプリのインスタンスで発生します。

DOM イベント

Event	Target	Description
tab:show	Tab Element<div class="tab">	イベントは、タブが表示されたとき、またはアクティブになったときに発生します。
tab:hide	Tab Element<div class="tab">	Tab が hidden/inactive になったときにイベントが発生します。
page:tabshow	Page Element<div class="page">	ページの親である View as Tab が表示されたときにイベントが発生します。
page:tabhide	Page Element<div class="page">	ページの親であるView as Tabが非表示になると、イベントが発生します。

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

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

Event	Arguments	Target	Description
tabShow	tabEl	app	タブが表示されたときにイベントが発生し、アクティブになります。イベントハンドラは引数として、表示されるようになったタブを受け取ります。
tabHide	tabEl	app	イベントは、Tabがhidden/inactiveになったときに発生します。引数のイベントハンドラは、非表示になったタブを受け取ります。
pageTabShow	pageEl	app	ページの親である View as Tab が表示されたときにイベントが発生します。表示されたタブの子であるページ要素を引数として受け取るイベントハンドラ
pageTabHide	pageEl	app	ページの親である View as Tab が非表示になったときにイベントが発生します。引数として、イベントハンドラは非表示になったビュータブの子であるページ要素を受け取ります。

ルーティング可能なタブ

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

まず第一に、いわゆる特別なタブリンクではなく、通常のリンクでタブに移動する機会を提供します。
第二に、このようなタブルートに移動すると、必要なタブを開いた状態でページを読み込むことができます。
第三に、ブラウザ履歴を有効にすると、履歴を前後に移動したときに同じタブが開かれます。
最後に、ルーティング可能なタブを使用する場合、ページと同じ方法でタブのコンテンツを読み込むことができます。

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

routes = [
  {
    // ページのメインルート
    path: '/tabs/',
    // tabs/index.htmlファイルからページを読み込みます。
    url: './pages/tabs/index.html',
    // tabs "プロパティをルートに渡します。これは、タブルートの配列でなければなりません。
    tabs: [
      // 最初の（デフォルトの）タブは、ページ自体と同じURLになります。
      {
        // タブのパス
        path: '/',
        // タブの ID
        id: 'tab-1',
        // このタブのコンテンツを content string から読み込む
        content: `
          <div class="block">
            <h3>About Me</h3>
            <p>...</p>
          </div>
        `
      },
      // 2つ目のタブ
      {
        path: '/tab-2/',
        id: 'tab-2',
        // このタブのコンテンツをAjaxリクエストで埋めます。
        url: './pages/tabs/tab-2.html',
      },
      // 3つ目のタブ
      {
        path: '/tab-3/',
        id: 'tab-3',
        // このタブのコンテンツをAjaxリクエストでコンポーネントとして読み込みます。
        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" は、指定されたルートのタブのIDと一致する必要があります。 -->
      <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>
  <!-- タブには追加の "tabs-routable "が必要です。 -->
  <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 要素に必要な追加クラスです。

なお、ビューはルーティング可能なタブとして使用することはできません。Routable Tabは、View/Routerの内部でのみ使用することができます。

Routable Tabs イベント

Router は、ルーティング可能なタブのコンテンツが読み込まれると、タブ要素の DOM イベントと router/view/app インスタンスのイベントが発生します。

DOM イベント

Event	Target	Description
tab:init tab:mounted	Tab Element<div class="tab">	イベントは、ルーティング可能なタブのコンテンツがロードされた直後に発生します。
tab:beforeremove	Tab Element<div class="tab">	イベントは、ルーティング可能なタブのコンテンツが削除される直前に発生します。

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

ルーターインスタンスは、自分自身のインスタンスと、その親である view インスタンスや app インスタンスの両方に対してイベントを発行します。

Event	Target	Arguments	Description
tabInit tabMounted	router view app	(newTabEl, tabRoute)	イベントは、ルーティング可能なタブコンテンツがロードされた直後にトリガーされます。イベントハンドラは、引数として `newTabEl` - ルートコンテンツがロードされたばかりのタブ HTML 要素 (新しいタブ) `tabRoute` - 新しいタブのルートです。
tabBeforeRemove	router view app	(oldTabEl, newTabEl, tabRoute)	イベントは、ルーティング可能なタブコンテンツが削除される直前に発生します。イベントハンドラーは、引数として `oldTabEl` - ルートコンテンツが削除されたばかりのタブの HTML 要素 (古いタブ) `newTabEl` - ルートコンテンツが読み込まれたばかりのタブの HTML 要素 (新しいタブ) `tabRoute` - 新しいタブのルート

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Static Tabs</div>
      </div>
    </div>
    <div class="toolbar tabbar toolbar-bottom">
      <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>
</template>

アニメーションタブ

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Animated Tabs</div>
      </div>
    </div>
    <div class="toolbar tabbar toolbar-bottom">
      <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>
</template>

スワイプ可能なタブ

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Swipeable Tabs</div>
      </div>
    </div>
    <div class="toolbar tabbar toolbar-bottom">
      <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-swipeable-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>
</template>

ルーティング可能なタブ

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>
      `,
    },
  ]
});

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Tabs Routable</div>
      </div>
    </div>
    <div class="toolbar tabbar toolbar-bottom">
      <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>
</template>