Framework7-tabs
提供:Dev Guides
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"> -これは単一のタブで、*一意のid *属性を持つ必要があります。
- <div class = "tab active"> -これは単一のアクティブタブであり、追加の_active_クラスを使用してタブを表示(アクティブ)にします。
タブを切り替える
ユーザーがそれらの間で切り替えることができるように、タブレイアウトでいくつかのコントローラーを使用できます。
このためには、_tab-link_クラスとターゲットタブの_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’s_および_data-tab_属性を使用する代わりにクラスを使用できます。
<!-- 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 | Tabs Types & Description |
---|---|
1 |
インラインタブは、インラインでグループ化されたセットで、すばやく切り替えることができます。 |
2 |
ナビゲーションバーにタブを配置して、タブを切り替えることができます。 |
3 |
単一のタブを使用して、独自のナビゲーションとレイアウトでビューを切り替えることができます。 |
4 |
単純なトランジション(アニメーション)を使用してタブを切り替えることができます。 |
5 |
タブに_tabs-swipeable-wrap_クラスを使用すると、単純な遷移でスワイプ可能なタブを作成できます。 |
6 |
JavaScriptイベントは、タブのJavaScriptコードで作業しているときに使用できます。 |
7 |
JavaScriptメソッドを使用してタブを切り替えたり表示したりできます。 |