Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

Template:OutSystems/OSLanguageSwitcher
Language:

 

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

 

 

 
OutSystems

Section

Section UIパターンを使用すると、画面上のコンテンツを様々なセクションに整理できます。また、Section Index UIパターンとともに使用すると、各セクションのアンカーを作成することができます。

Section UIパターンの使用方法

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

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

![](<images/section-1-ss.png>)

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

![](<images/section-2-ss.png?width=800>)

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

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

![](<images/section-3-ss.png?width=800>)

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

![](<images/section-6-ss.png?width=800>)

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

プロパティ

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

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