Skip to main content

 

 

 

 
Language:
 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Section Group

Section Group UIパターンを使用すると、ヘッダーのコンテキストを維持しながらコンテンツをスクロールすることができます。

Section Group UIパターンの使用方法

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

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

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

    デフォルトで、Section Groupウィジェットには3つのSectionウィジェットが含まれており、それぞれに[Title]プレースホルダと[Content]プレースホルダが含まれています。

  3. プレースホルダにコンテンツを追加します。

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

  4. Properties]タブで(オプションの)プロパティを設定し、Section Groupのルックアンドフィールをカスタマイズできます。

    HasStickyTitles = False

    HasStickyTitles = True

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

プロパティ

プロパティ 説明
HasStickyTitles(Boolean型): オプション Trueに設定すると、ユーザーがコンテンツをスクロールしてもセクションのタイトルはページ上部に固定されます。Falseの場合、セクションのタイトルがコンテンツとともにスクロールします。
TopPosition(Integer型): オプション 最初のセクションのタイトルの位置を設定します。HasStickyTitlesプロパティがTrueに設定されている場合にのみ適用されます。
ExtendedClass(Text型): オプション Section Group UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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