Skip to main content

 

UIを設計する

 

OutSystems

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パターンを使用したサンプルです。

  • Was this article helpful?