Skip to main content

 

 

 

 
Language:

 

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

 

 
 
OutSystems

Flip Contentのリファレンス

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.flip-content .flip-content.is--hover TriggerパラメータがHoverの場合
.flip-content .flip-content.is--click TriggerパラメータがClickの場合
.flip-content .flip-content.is--click.is--flipped FlipContentがフリップされた場合

高度なユースケース

Flip Contentパターンでイベントを使用する

他のパターンと連携したり、FlipContentイベントでアクションをトリガーしたりすることができます。イベントを使用するには、イベントを保持する画面アクションを作成します。

1.Boolean型のローカル変数を作成して、「Flipped」という名前を付けます。

1.Flip Contentパターンをプレビューにドラッグします。

1.前面および背面のプレースホルダでコンテンツを設定します。

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

1.コンテナをプレビューにドラッグし、Nameを「AlertEvent」に設定します。

1.If条件をコンテナ内にドラッグし、条件を「Flipped」に設定します。

1.TrueブランチとFalseブランチでコンテンツを設定します(例: Alertパターン)。

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

1.FlipContentパターンを選択し、[Events]セクションで、イベントを保持する新しい画面アクションを作成します。

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

1.画面アクションにAssignツールをドラッグし、isFlippedイベント変数にFlippedローカル変数を割り当てます。

1.画面アクションにAjax Refreshノードをドラッグし、パラメータとしてAlertEventを設定し、画面のコンテナを更新します。アニメーション効果を削除します。

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

1.パブリッシュしてテストします。

![](<images/flipcontent-11.gif>)

Flip ContentパターンでToggleサーバーアクションを使用する

ToggleFlipContentサーバーアクションを使用して、FlipContentを操作するボタンやコンテナを使用することができます。

1.Boolean型のローカル変数を作成して、「Flipped」という名前を付けます。

1.FlipContentパターンをプレビューにドラッグし、Nameプロパティを「FlipContentToggleAction」に設定します。

1.FlipContentで、Triggerを「Manual」に設定します。

1.前面および背面のプレースホルダでコンテンツを設定します。

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

1.ボタンをプレビューにドラッグします。

1.Methodを「Ajax Submit」に設定し、新しい画面アクションを作成します。

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

1.画面アクションで、[Logic]タブに移動し、ToggleFlipContentサーバーアクションを画面アクションにドラッグします。

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

1.ToggleFlipContentでWidgetIdを設定します。

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

1.パブリッシュしてテストします。

![](<images/flipcontent-image-10.gif>)
  • Was this article helpful?