Framework7-タブ

説明

タブは論理的にグループ化されたコンテンツのセットであり、タブ間をすばやく切り替えて、アコーディオンのようにスペースを節約できます。

タブレイアウト

次のコードは、タブのレイアウトを定義します-

<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
   <!-- The tab, should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

ここで-

  • <div class = "tabs">−すべてのタブに必須のラッパーです。これを見逃すと、タブはまったく機能しなくなります。

  • <div class = "tab"> −これは単一のタブであり、 unique id 属性。

  • <div class = "tab active">−これは単一のアクティブなタブであり、追加のアクティブなクラスを使用してタブを表示(アクティブ)にします。

タブ間の切り替え

タブレイアウトでいくつかのコントローラーを使用して、ユーザーがそれらを切り替えることができるようにすることができます。

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

<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1)  -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>

<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2)  -->
<a href = "#tab2" class = "tab-link">Tab 2</a>

<a href = "#tab3" class = "tab-link">Tab 3</a>

複数のタブを切り替える

単一のタブリンクを使用して複数のタブを切り替える場合は、IDデータタブ属性を使用する代わりにクラスを使用できます。

<!-- For Top Tabs  -->
<div class = "tabs tabs-top">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Tabs links -->
<div class = "tab-links">
   <!-- Links are switch top and bottom tabs to .tab1 -->
   <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
   <!-- Links are switch top and bottom tabs to .tab2 -->
   <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
   <!-- Links are switch top and bottom tabs to .tab3 -->
   <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>

tab-linkのdata-tab属性には、ターゲットタブ/タブのCSSセレクターが含まれています。

タブにはさまざまな方法を使用できます。これらは次の表で指定されています-

S.No タブの種類と説明
1 インラインタブ

インラインタブは、インラインでグループ化されたセットであり、タブをすばやく切り替えることができます。

2 ナビゲーションバーからタブを切り替える

ナビゲーションバーにタブを配置して、タブを切り替えることができます。

3 タブバーからビューを切り替える

単一のタブを使用して、独自のナビゲーションとレイアウトでビューを切り替えることができます。

4 アニメーションタブ

単純な遷移(アニメーション)を使用してタブを切り替えることができます。

5 スワイプ可能なタブ

タブにtabs-swipeable-wrapクラスを使用すると、簡単な遷移でスワイプ可能なタブを作成できます。

6 タブJavaScriptイベント

JavaScriptイベントは、タブのJavaScriptコードを操作しているときに使用できます。

7 JavaScriptを使用してタブを表示

JavaScriptメソッドを使用して、タブを切り替えたり表示したりできます。