Skip to main content

 

 

 

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

Section Index

Section Index UIパターンを使用すると、画面のコンテンツを整理してページ内をすばやく移動できます。

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

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

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

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

    この例では、Section Indexウィジェットを列にドラッグしています。

  3. ツールボックスでSectionウィジェットを検索し、アプリケーション画面のメインコンテンツ領域にドラッグします。アプリに必要な数に応じてセクションを追加します。

    この例では、4つのSectionウィジェットを列にドラッグしています。各Sectionウィジェットには、[Title]プレースホルダと[Content]プレースホルダが含まれています。

  4. 関連するコンテンツをSectionウィジェットの[Title]プレースホルダと[Content]プレースホルダに追加します。

    この例では、[Title]プレースホルダに従業員名を追加し、[Content]プレースホルダにテキストと画像を含むCard Sectionedウィジェットを追加しています。

    画面上にあるすべてのセクションへのリンクが自動的に作成されます。リンクの名前は、各セクションの[Title]プレースホルダに入力したテキストに基づきます。以下の例では、リンクは手順2で入力した従業員名に設定されています。

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

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

プロパティ

プロパティ 説明
IsSmooth(Boolean型): オプション Trueの場合、リンク先への移動がアニメーション化されます。これがデフォルトです。Falseの場合、即時に移動します。
IsFixed(Text型): オプション Trueの場合、Section Indexパターンは常に画面上の同じ位置に表示されます。これがデフォルトです。Falseの場合、Section Indexパターンがページコンテンツとともにスクロールします。
TopPosition(Integer型): オプション ページの上部からSection Indexの最初のアイテムまでの距離(ピクセル単位)。デフォルト値は0。
ExtendedClass(Text型): オプション Section Index UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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

その他の注記

Section Indexパターンでは、[Title]プレースホルダを忘れずに使用してください。各Section Indexのリンクのテキストがこれによって定義されます。

  • Was this article helpful?