Skip to main content

 

 

 

 
Language:

 

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

 

 
 
OutSystems

Flip Content

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

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

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

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

![](<images/flipcontent-2-ss.png>)

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

![](<images/flipcontent-3-ss.png>)

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

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

![](<images/flipcontent-4-ss.png>)

1.[Properties]タブの[Trigger]ドロップダウンで、Flip Contentウィジェットがトリガーされるタイミング(クリック時など)をカスタマイズできます。

![](<images/flipcontent-5-ss.png>)

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

プロパティ

プロパティ 説明
Trigger(Trigger Identifier型): オプション フリップイベントがトリガーされるタイミングを定義します。以下のオプションが事前定義されています。

  • Click
  • Hover
  • Manual

  • 空白 - マウスポインタを上に重ねるとフリップイベントがトリガーされます(デフォルト値)。
  • Entities.Trigger.Click - ユーザーがクリックするとフリップイベントがトリガーされます。
  • Entities.Trigger.Hover - ユーザーがマウスポインタを上に重ねるとフリップイベントがトリガーされます。
ExtendedClass(Text型): オプション Flip Content UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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