Skip to main content

 

 

 

 
Language:
 
従来のWebアプリにのみ適用されます
 
 
OutSystems

Panel

Panel UIパターンを使用すると、情報を小さなブロックにグループ化してタイトル、アクション、コンテンツ、小さなフッターの様々なセクションで整理し、画面で識別しやすくすることができます。

Panelは、少量の情報をグループ化し、特定の構造を使用して画面で強調表示するために使用します。

Panel UIパターンの使用方法

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

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

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

    デフォルトで、Panelウィジェットには[Title]、[Actions]、[Content]、[Footer]の各プレースホルダが含まれています。

  3. プレースホルダにコンテンツを追加します。この例では、[Title]プレースホルダにタイトルを追加し、[Content]プレースホルダにテキストを追加し、[Actions]プレースホルダにボタンを追加しています。

  4. [Actions]プレースホルダに追加したコンテンツに、必要なアクションを追加します。この例では、追加したボタンによってユーザーを新しいページにリダイレクトされます。

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

プロパティ

プロパティ 説明
ExtendedClass(Text型): オプション Panel UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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