Tabs
Tabs UIパターンを使用すると、コンテンツをわかりやすいセクションに分割できます。各セクションを一度に表示することができます。ユーザーが同じコンテキスト内のセクションを移動できるようにし、他の領域には移動できないようにする場合に、このパターンを使用します。
Tabs UIパターンの使用方法
-
Service Studioのツールボックスで
Tabsを検索します。Tabsウィジェットが表示されます。
-
ツールボックスから、Tabsウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
デフォルトで、Tabsウィジェットには3つのHeader Item（タブのタイトル）と3つのContent Item（タブのコンテンツ）が含まれています。必要に応じて追加または削除することができます。
-
フォーム、画像、リンク、テキストなどの関連コンテンツをHeader ItemとContent Itemのプレースホルダに追加します。この例では、各プレースホルダに直接テキストを入力して追加しています。以下のように追加できます。
-
［Properties］タブでオプションのプロパティを設定し、Tabsのルックアンドフィールをカスタマイズできます。たとえば、ページが描画されたときにアクティブなタブとして表示されるタブや、タブの表示方向（縦または横）を設定できます。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
タブとコンテンツにスタイルを追加する
以下のCSSコードは、タブ内の選択した項目のスタイルを変更する方法の例です。
.tabs-header-tab {
background-color: #ebebeb;
}
.tabs-header-tab.active {
border-bottom: 3px solid #000;
background-color: #ebebeb;
color: #0097eb;
}
.tabs-content-tab {
background-color: #ccc;
padding: 20px;
font-size: 18px;
font-stretch: condensed;
}
コンテンツのないタブを非表示にする
すべてのSilkパターンで、コンテンツのない_div_は非表示になります。必要なタブは2～3個だけでその他のタブを非表示にする場合、特に操作を行う必要はありません。
プロパティ
| プロパティ | 説明 |
|---|---|
| StartingTab（Integer型）: オプション | 現在アクティブなタブのインデックスを設定します。このインデックスは0から開始します。 例
|
| IsJustified（Boolean型）:オプション | Trueの場合、タブは利用可能な領域に均等に分散されます。Falseに設定すると、タブは左揃えになります。これがデフォルト値です。 |
| IsVertical（Boolean型）:オプション | Trueの場合、タブは縦方向に表示されます。Falseに設定すると、タブは横方向に表示されます。これがデフォルト値です。 |
| IsRight（Boolean型）:オプション | Trueの場合、タブコンテンツの右側にタブが表示されます。Falseに設定すると、タブコンテンツの左側にタブが表示されます。これがデフォルト値です。注記: この設定は、IsVerticalプロパティがTrueに設定されているときにのみ適用されます。 |
| ExtendedClass（Text型）:オプション | Tabs UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|
デバイスとパターンの互換性
-
4.4.2 OSバージョンのAndroidデバイスのRTLには対応していません。
-
Stacked CardsパターンやCarouselパターンなど、スワップイベントを使用するパターン内でのTabsパターンの使用は避けてください。