Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

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

デモ

プロパティ

プロパティ 説明
WidgetId(Text型): 必須 要素の表示をトリガーするID。
Position(PositionBase Identifier型):オプション ウィジェットに対するBalloonコンテンツの相対的な位置を設定します。以下のオプションが事前定義されています。

  • Bottom
  • Left
  • Right
  • Top



  • Entities.PositionBase.Bottom - コンテンツは要素の下に表示されます。これがデフォルト値です。
  • Entities.PositionBase.Right - コンテンツは要素の右に表示されます。
Trigger(Trigger Identifier型):オプション コンテンツの表示をトリガーするアクションを設定します。以下のオプションが事前定義されています。

  • Click
  • Hover
  • Manual



  • Entities.Trigger.Click - ユーザーが要素をクリックするとコンテンツが表示されます。
  • Entities.Trigger.Manual - プログラムによってツールチップをトリガーする必要があります。
  • Entities.Trigger.Hover - ユーザーが要素にマウスポインタを重ねるとコンテンツが表示されます。
ExtendedClass(Text型):オプション Balloon UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるBalloon UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるBalloon UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
AdvancedFormat(Text型):オプション 入力パラメータによって提供されるオプションのほかに、追加オプションを使用できます。

例:{ arrow: false, showOnInit: true }

詳細については以下をご覧ください。
https://atomiks.github.io/tippyjs/
  • Was this article helpful?