ウィジェット コントローラー ウィジェット

ウィジェット コントローラー ウィジェットは、他のウィジェットをボタンとして整理し、そのライフサイクルと表示を管理するために使用できるグループ化できるコンテナーです。 コントローラー内のウィジェットの方向 (水平または垂直) を変更できます。 開くことのできるウィジェットの数とウィジェット ボタンの表示方法も制御できます。

このウィジェットを使用して、次のようなアプリの設計要件をサポートします。

  • ツールバーに似たコントローラーで整理されたウィジェットを含む、全画面で表示されるマップ中心のアプリを作成します。ユーザーは、このアプリを使用して 1 つ以上のウィジェットを開き、必要に応じてマップを操作します。

使用上の注意

ウィジェットをコントローラーに追加するには、[ウィジェットの追加] ボタンをクリックして、ウィジェット ギャラリーから選択するか、[ウィジェットの挿入] パネルからコントローラーにウィジェットをドラッグします。 コントローラーに追加したウィジェットをクリックし、その設定パネルを開いて、そのウィジェットを構成します。 ウィジェット パネルの下隅をドラッグして初期サイズを定義します。

設定

ウィジェット コントローラー ウィジェットには以下の設定が含まれます。

  • [方向] - コントローラーを垂直方向または水平方向に表示します。
  • [動作] - このコントローラーから開くことができるウィジェットの数およびページが読み込まれたときに自動的に開くウィジェットを定義します。
    • [シングル] - 一度に開くことができるウィジェットは 1 つだけです。 ウィジェットを開くと、他のウィジェットは閉じます。
    • [複数] - 同時に複数のウィジェットを開いて実行できます。 この場合、開いたウィジェットを重ねて表示するか、並べて表示するかを選択できます。
      ヒント:

      このオプションを試すには、ビルダー ツールバーの [ライブ ビュー] をクリックします。

    • ウィジェット リストから 1 つ以上のウィジェットを選択して、ページが読み込まれたときに自動的に開かれるようにします。
  • ウィジェット パネルの配置 - ウィジェット パネルを表示する場所を選択します。
    • [フローティング] - ウィジェット パネルは、各ウィジェットのアイコンに固定され、コントローラーの横に浮かんでいるように表示されます。
    • [固定] - ウィジェット パネルを、キャンバスの四隅のいずれかに固定して表示します。 パネルの幅と高さは、ピクセル ([px]) かキャンバスに対するパーセンテージ ([%]) で設定できます。 また、X 軸と Y 軸のオフセットを設定し、パネルが開いたときに表示されるアニメーションを追加できます。
    注意:

    [ウィジェット パネルの配置] 設定は、ウィジェットが大画面または中画面に表示された場合にのみ適用されます。 画面サイズが小さいデバイスでは、ウィジェットはアプリの下部に表示されます。すべてのデバイスでのレイアウトの調整に関する詳細

  • [表示設定] - ウィジェット コントローラー内のウィジェットを選択し、アイコン、ラベル、またはスタイルをカスタマイズします。
    • [アイコン] - ウィジェット アイコンに円または四角形を使用します。
    • [ラベル] - ウィジェットの名前をアイコンの下にラベルとして表示します。 このテキストはデフォルトの名前と一致します。エンド ユーザーにわかりやすくなるように、構成パネルでウィジェットの名前を編集します。
    • [ツールチップ] - ラベルを代わりに使用する場合は、ボタンのホバー テキストを無効にします。
    • [サイズ] - ウィジェット アイコンのサイズを変更します。
    • [間隔] - ウィジェット アイコン間のスペースを指定します。
  • [高度な設定] - [デフォルト][選択][ホバー] の 3 つの状態に対し、コントローラー上のボタンを表示する方法を構成します。 アイコンの背景色を変更できるほか、ラベルをオンにすると、テキストのフォント色を変更し、太字、斜体、取り消し線、下線の書式設定を使用できます。
    • [デフォルト] - ユーザーの操作がないボタンのデフォルトの状態。
    • [選択] - コントローラー上でユーザーが選択しているボタン、または開いているウィジェットの状態。
    • [ホバー] - ユーザーがコントローラーにポインターを合わせたときのボタンの状態。
    注意:

    選択したテーマは、構成オプションの色の選択肢に影響します。 アプリのテーマに含まれていない色を使用したい場合は、[その他] をクリックしてユーザー設定の色を選択できます。


このトピックの内容
  1. 使用上の注意
  2. 設定