Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 

OutSystems

Tabs

Tabs UIパターンを使用すると、コンテンツをわかりやすいセクションに分割できます。各セクションを一度に表示することができます。ユーザーが同じコンテキスト内のセクションを移動できるようにし、他の領域には移動できないようにする場合に、このパターンを使用します。

Tabs UIパターンの使用方法

  1. Service StudioのツールボックスでTabsを検索します。

    Tabsウィジェットが表示されます。

  2. ツールボックスから、Tabsウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

    デフォルトで、Tabsウィジェットには3つのHeader Item(タブのタイトル)と3つのContent Item(タブのコンテンツ)が含まれています。必要に応じて追加または削除することができます。

  3. フォーム、画像、リンク、テキストなどの関連コンテンツをHeader ItemとContent Itemのプレースホルダに追加します。この例では、各プレースホルダに直接テキストを入力して追加しています。以下のように追加できます。

  4. 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から開始します。

  • 空白 - 1つ目のタブがアクティブなタブになります。これがデフォルトです。
  • 1 - 2つ目のタブがアクティブなタブになります。
IsJustified(Boolean型):オプション Trueの場合、タブは利用可能な領域に均等に分散されます。Falseに設定すると、タブは左揃えになります。これがデフォルト値です。
IsVertical(Boolean型):オプション Trueの場合、タブは縦方向に表示されます。Falseに設定すると、タブは横方向に表示されます。これがデフォルト値です。
IsRight(Boolean型):オプション Trueの場合、タブコンテンツの右側にタブが表示されます。Falseに設定すると、タブコンテンツの左側にタブが表示されます。これがデフォルト値です。注記: この設定は、IsVerticalプロパティがTrueに設定されているときにのみ適用されます。
ExtendedClass(Text型):オプション Tabs UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるTabs UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるTabs UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。

デバイスとパターンの互換性

  • 4.4.2 OSバージョンのAndroidデバイスのRTLには対応していません。

  • Stacked CardsパターンやCarouselパターンなど、スワップイベントを使用するパターン内でのTabsパターンの使用は避けてください。

  • Was this article helpful?