Skip to main content

 

 

 

 
Language:
 
従来の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のルックアンドフィールをカスタマイズできます。たとえば、ページが読み込まれたときにアクティブなタブとして表示されるタブや、タブの表示方向(縦または横)を設定できます。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

デモ

プロパティ

Tabs

プロパティ 説明
ActiveTab(Text型): オプション ページが読み込まれたときにアクティブになるタブを定義します。

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

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

Tabs Header Item

プロパティ 説明
DataTab(Text型): 必須 Tabs Content Itemと関連付ける名前を設定します。ペアとなるHeader Itemと同じで、一意である必要があります。

Tabs Content Item

プロパティ 説明
DataTab(Text型): 必須 Tabs Header Itemと関連付ける値。ペアとなるContent Itemと同じで、一意である必要があります。
  • Was this article helpful?