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パターンの使用は避けてください。