Balloon
Balloon UIパターンを使用すると、UI上のポップアップにコンテンツを表示できます。小さい画面上の要素に関連する追加情報を表示する必要がある場合に、Balloon UIパターンが役立ちます。
Balloon UIパターンの使用方法
この例では、フォームを含む画面上でツールチップとしてBalloonを使用します。
-
Service Studioのツールボックスで
Balloon
を検索します。Balloonウィジェットが表示されます。
-
ツールボックスから、Balloonウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
-
BalloonウィジェットをFirst Name入力ウィジェットにバインドするため、[Properties]タブの[WidgetId]ドロップダウンで[firstname.Id]を選択します。
注記: WidgetIdは、Balloonをバインドする要素のNameに基づきます。
-
表示するコンテンツを[Content]プレースホルダに入力します。この例では、テキストを追加しています。
-
Balloonによるポップアップが必要な各要素で手順2~4を繰り返します。
-
[Properties]タブで(オプションの)プロパティを設定し、Balloonウィジェットのルックアンドフィールを変更できます。たとえば、画面上のコンテンツの位置やコンテンツの表示をトリガーするアクションなどを設定できます。
-
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
デモ
プロパティ
プロパティ | 説明 |
---|---|
WidgetId(Text型): 必須 | 要素の表示をトリガーするID。 |
Position(PositionBase Identifier型):オプション | ウィジェットに対するBalloonコンテンツの相対的な位置を設定します。以下のオプションが事前定義されています。
例
|
Trigger(Trigger Identifier型):オプション | コンテンツの表示をトリガーするアクションを設定します。以下のオプションが事前定義されています。
例
|
ExtendedClass(Text型):オプション | Balloon UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|
AdvancedFormat(Text型):オプション | 入力パラメータによって提供されるオプションのほかに、追加オプションを使用できます。 例: { arrow: false, showOnInit: true } 詳細については以下をご覧ください。 |
https://atomiks.github.io/tippyjs/ |