Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Flip Content

前面および背面要素のプレースホルダを持つフリップ可能なウィジェットを作成するコンテナ。

FlipContentは、情報表示の優先順位を指定し、インターフェイスを整理された状態に保つために使用します。重要な情報を最初に表示し、フリップによって詳細を表示します。

使用方法

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

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

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

入力パラメータ

入力名 説明 必須 デフォルト値
Trigger フリップのトリガーイベントを設定します。マウスホバーまたはクリックイベントを設定できます。 Trigger Identifier False Entities.Trigger.Hover
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし

レイアウトおよびクラス

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がフリップされた場合

高度なユースケース

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

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

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

  2. FlipContentパターンをプレビューにドラッグします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Was this article helpful?