Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Balloon

コンテンツの追加のオーバーレイを表示します。

Balloonは、UIのコンテキストを失うことなく必要なコンテンツをときどき小さい領域に表示する必要がある場合に使用します。

使用方法

[Balloon]プレースホルダ内にコンテンツを追加します。次に、BalloonをトリガーするWidgetIdを構成します。位置およびトリガーのタイプを選択することもできます。

  1. バルーンをプレビューにドラッグします。
  2. タイトル、コンテンツ、フッターのプレースホルダにコンテンツを設定します。

デモ

入力パラメータ

入力名 説明 必須 デフォルト値
WidgetId 要素の表示をトリガーする要素名。 Text True なし
Position ウィジェット要素の周囲の位置を設定します。 PositionBase Identifier False Entities.PositionBase.Bottom
Trigger コンテンツのトリガーのタイプを設定します。Manualの場合、ツールチップをプログラムでトリガーする必要があります。 Trigger Identifier False Entities.Trigger.Hover
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし
AdvancedFormat 入力パラメータによって提供されるオプションのほかに、追加オプションを使用できます。例: { arrow: false, showOnInit: true } 詳細については、https://atomiks.github.io/tippyjs/をご覧ください Text False なし

レイアウトおよびクラス

イベント

イベント名 説明 必須
OnHide バルーンが非表示になるとトリガーされるイベント。 False
OnShow バルーンが表示されるとトリガーされるイベント。 False

高度な設定

以下にウィジェットの高度なユースケースをいくつか示します。

最初にバルーンを表示する

  1. バルーンをプレビューにドラッグします。
  2. AdvancedFormatパラメータを「{ showOnInit: true }」に設定します。

アニメーションを変更する

  1. バルーンをプレビューにドラッグします。
  2. AdvancedFormatパラメータを「{animation: 'perspective' }」に設定します。

変更後のアニメーション:

  • Was this article helpful?