ウィジェット コントローラー ウィジェットは、他のウィジェットをツールバーに整理するために使用できるコンテナーです。 コントローラー内のウィジェットの向きは、水平方向または垂直方向に設定できます。 開くことのできるウィジェットの数とウィジェット ボタンの表示方法を制御できます。
例
このウィジェットを使用して、次のようなアプリの設計要件をサポートします。
- ツールバーに似たコントローラーで整理されたウィジェットを含む、全画面で表示されるマップ中心のアプリを作成します。ユーザーは、このアプリを使用して 1 つ以上のウィジェットを開き、必要に応じてマップを操作します。
使用上の注意
ウィジェットをコントローラーに追加するには、[ウィジェットの追加] ボタンをクリックして、ウィジェット ギャラリーから選択するか、[ウィジェットの挿入] パネルからコントローラーにウィジェットをドラッグします。 コントローラーに追加したウィジェットをクリックし、その設定パネルを開いて、そのウィジェットを構成します。 ウィジェット パネルの下隅をドラッグして初期サイズを定義します。
実行時にコントローラー内のウィジェットをクリックしてウィジェット パネルを開くと、そのウィジェットのアイコンの下に、ウィジェットがアクティブであることを知らせるインジケーター ラインが表示されます。 [展開] ボタンと [折りたたみ] ボタンを使用して、パネルを完全に閉じないで、パネルが占めるスペースの量を変更できます。
設定
ウィジェット コントローラー ウィジェットには以下の設定が含まれます。
- [方向] - コントローラーを垂直方向または水平方向に表示します。
- [動作] - このコントローラーから開くことができるウィジェットの数およびページが読み込まれたときに自動的に開くウィジェットを定義します。
- [シングル] - 一度に開くことができるウィジェットは 1 つだけです。 ウィジェットを開くと、他のウィジェットは閉じます。
- [複数] - 同時に複数のウィジェットを開いて実行できます。 この場合、開いたウィジェットを重ねて表示するか、並べて表示できます。
ヒント:
このオプションを試すには、ビルダー ツールバーの [ライブ ビュー] をクリックします。
- ウィジェット リストから 1 つ以上のウィジェットを選択して、ページが読み込まれたときに自動的に開かれるようにします。
- [ウィジェット パネルの配置] - ウィジェット パネルを表示する場所を選択します。
- [フローティング] - ウィジェット パネルは、各ウィジェットのアイコンに固定され、コントローラーの横に浮かんでいるように表示されます。
- [固定] - ウィジェット パネルを、キャンバスの 9 つのアンカー ポイントのいずれかに固定して表示します。 パネルの幅と高さは、ピクセル ([px]) かキャンバスに対するパーセンテージ ([%]) で設定できます。 また、X 軸と Y 軸のオフセットを設定し、パネルが開いたときに表示されるアニメーションを追加できます。
- パネルの幅と高さは、[ストレッチ] に設定することもできます。 その場合、[上]、[下]、[左]、[右] の余白内で、キャンバスのエリアを埋めるようにパネルがストレッチされます。これは、ピクセル単位 ([px]) またはキャンバスのパーセント ([%]) で定義できます。
注意:
[ウィジェット パネルの配置] 設定は、ウィジェットが大画面または中画面に表示された場合にのみ適用されます。 画面サイズが小さいデバイスでは、ウィジェットはアプリの下部に表示されます。すべてのデバイスでのレイアウトの調整に関する詳細。
- [表示設定] - ウィジェット コントローラー内のウィジェットを選択し、アイコン、ラベル、またはスタイルをカスタマイズします。
- [アイコン] - ウィジェット アイコンに円または四角形を使用します。
- [ラベル] - ウィジェットの名前をラベルとしてアイコンの下に表示します。 設定パネルまたはビルダーのアウトラインでウィジェット名を編集することで、これらのラベルを変更できます。
- [インジケーター] - アクティブなウィジェットを知らせるインジケーター ラインを含めます。
- [ツールチップ] - ボタンのホバー テキストを含めます。
- [サイズ] - ウィジェット アイコンのサイズを変更します。
- [間隔] - ウィジェット アイコン間のスペースをピクセル単位 ([px]) で指定します。
- [高度な設定] - [デフォルト]、[選択]、[ホバー] の 3 つの状態に対し、コントローラー上のボタンを表示する方法を選択します。 アイコンの背景色を変更できるほか、ラベルをオンにすると、テキストのフォント色を変更し、太字、斜体、取り消し線、下線の書式設定を使用できます。
- [デフォルト] - ユーザーの操作がないボタンのデフォルトの状態。
- [選択] - コントローラー上でユーザーが選択しているボタン、または開いているウィジェットの状態。
- [ホバー] - ユーザーがコントローラーにポインターを合わせたときのボタンの状態。
注意:
選択したテーマは、構成オプションの色の選択肢に影響します。 アプリのテーマに含まれていない色を使用したい場合は、[その他] をクリックしてユーザー設定の色を選択できます。