Balloon
コンテンツの追加のオーバーレイを表示します。
Balloonは、UIのコンテキストを失うことなく必要なコンテンツをときどき小さい領域に表示する必要がある場合に使用します。
使用方法
［Balloon］プレースホルダ内にコンテンツを追加します。次に、BalloonをトリガーするWidgetIdを構成します。位置およびトリガーのタイプを選択することもできます。
- バルーンをプレビューにドラッグします。
-
タイトル、コンテンツ、フッターのプレースホルダにコンテンツを設定します。
デモ
入力パラメータ
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| 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 |
高度な設定
以下にウィジェットの高度なユースケースをいくつか示します。
最初にバルーンを表示する
- バルーンをプレビューにドラッグします。
- AdvancedFormatパラメータを「
{ showOnInit: true }」に設定します。
アニメーションを変更する
- バルーンをプレビューにドラッグします。
-
AdvancedFormatパラメータを「
{animation: 'perspective' }」に設定します。
変更後のアニメーション:
