Skip to main content

 

 

 

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

Floating Content

Floating Content UIパターンを使用すると、道順を示す地図などのその他の画面要素の上にコンテンツを表示することができます。

Floating Content UIパターンの使用方法

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

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

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

    この例では、すでに地図の画像がメインコンテンツ領域に含まれています。

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

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

    この例では、Searchウィジェットを追加しています。

  4. Floating Contentウィジェットを選択し、[Properties]タブで必須のPositionプロパティを設定します。これにより、ウィジェットの表示位置が定義されます。(オプションの)プロパティを設定し、Floating Contentのルックアンドフィールをカスタマイズできます。

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

プロパティ

Floating Content

プロパティ 説明
Position(Position Identifier型): 必須 フローティングコンテンツが表示される画面上の位置。
UseFullHeight(Boolean型): オプション Trueの場合、ウィジェットを画面全体の高さにします。Falseの場合、ウィジェットは画面全体の高さになりません。これがデフォルトです。
UseFullWidth(Boolean型): オプション Trueの場合、ウィジェットを画面全体の幅にします。Falseの場合、ウィジェットは画面全体の幅になりません。これがデフォルトです。
UseMargin(Boolean型): オプション Trueの場合、ウィジェットにマージンが適用されます。これがデフォルトです。Falseの場合、ウィジェットにはマージンが適用されません。
ExtendedClass(Text型): オプション Floating Content UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



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