Skip to main content

 

 

 

 
Language:

 

 
従来のWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Flip Content

Flip Content UIパターンを使用すると、たとえば、表示されている情報をクリックすると、フリップによって異なる情報が表示されるようにすることができます。

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

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

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

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

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

  3. 必要なコンテンツをFlip Contentウィジェット内の前面と背面の各プレースホルダに追加します。

    この例では、Imageウィジェットを[CardFront]プレースホルダと[CardBack]プレースホルダにドラッグし、[Image]ドップダウンで、OutSystems UIのサンプル画像から画像を選択して追加しています。

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

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

プロパティ

プロパティ 説明
IsFlipped(Boolean型): オプション Trueの場合、[CardFront]のコンテンツがフリップの前に最初に表示されます。Falseの場合、[CardBack]のコンテンツがフリップの前に最初に表示されます。これがデフォルトです。
FlipSelf(Boolean型): オプション Trueの場合、クリック時にコンテンツのフリップイベントがトリガーされます。これがデフォルトです。Falseの場合、フリップをトリガーするアクションを定義できます。
ExtendedClass(Text型): オプション Flip Content UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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