Tabsパターン
タイトルとコンテンツのプレースホルダを含むタブのセットです。クリックするだけで、異なる領域に分割できる大量の情報を表示できます。このパターンを使用すると、大量の情報を異なる領域に分割して表示できます。
以下は、Service Studioでのプレビューです。
Tabsパターンの使用方法
1.Tabsパターンを画面にドラッグします。
2.コンテンツをプレースホルダ内に配置します。
a. ［Tabs1］、［Tabs2］、［Tabs3］、［Tabs4］、［Tabs5］の各プレースホルダは、ヘッダータブを表します。
b. その他のプレースホルダは、各タブのコンテンツを表します。
c. 必要なタブは2～3個だけでその他のタブを非表示にする場合、特に操作を行う必要はありません。このパターンでは、コンテンツのないプレースホルダは非表示になります。
3.描画時にタブを表示するために、StartingTabパラメータを設定します（「入力パラメータ」を参照）。
4.アプリをパブリッシュします。
タブとコンテンツにスタイルを追加する
以下は、タブ内の選択した項目のスタイルを変更する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 |
現在アクティブなタブのインデックス。 | 0 |
イベント
| イベント名 | 説明 | 必須 |
|---|---|---|
 OnTabChange |
タブを切り替えるとトリガーされます。 | False |
レイアウトおよびクラス
CSSセレクタ
| 要素 | CSSクラス | 説明 |
|---|---|---|
 Tabs Wrapper |
.tabs | すべてのTabs要素をラップするコンテナ。 |
| Active tab header |
.tabs-header-tab-active | アクティブな要素のヘッダーを表します。 |
| Open tab content |
.tabs-content-tab-open | 開いているアイテムのコンテンツを表す点。 |
デバイとパターンの互換性
4.4.2 OSバージョンのAndroidデバイスのRTLには対応していません。
Stacked CardsやCarouselなど、スワップイベントを使用するパターン内でのTabsの使用は避けてください。
サンプル
以下は、Tabsパターンを使用したサンプルです。
