Balloon

Balloon UIパターンを使用すると、UI上のポップアップにコンテンツを表示できます。小さい画面上の要素に関連する追加情報を表示する必要がある場合に、Balloon UIパターンが役立ちます。

Balloon UIパターンの使用方法

この例では、フォームを含む画面上でツールチップとしてBalloonを使用します。

1. Service StudioのツールボックスでBalloonを検索します。

   Balloonウィジェットが表示されます。

   

2. ツールボックスから、Balloonウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

   

3. BalloonウィジェットをFirst Name入力ウィジェットにバインドするため、［Properties］タブの［WidgetId］ドロップダウンで［firstname.Id］を選択します。

   

   注記: WidgetIdは、Balloonをバインドする要素のNameに基づきます。

4. 表示するコンテンツを［Content］プレースホルダに入力します。この例では、テキストを追加しています。

   

5. Balloonによるポップアップが必要な各要素で手順2～4を繰り返します。

6. ［Properties］タブで（オプションの）プロパティを設定し、Balloonウィジェットのルックアンドフィールを変更できます。たとえば、画面上のコンテンツの位置やコンテンツの表示をトリガーするアクションなどを設定できます。

   

7. これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。