グリッド ウィジェットは、グリッドでコンテンツを整理することができるレイアウト コンテナーです。 グリッド ウィジェットには他の複数のウィジェットを含めることができます。
例
このウィジェットを使用して、次のようなアプリの設計要件をサポートします。
- 埋め込みメディアなどのページ要素をグリッドで整理します。
- ユーザーがグリッド内の個々の画像を拡大してページ全体に表示できるようにします。
使用上の注意
グリッド ウィジェットを追加すると、[ウィジェットの追加] ボタンと [グリッド テンプレートの選択] ボタンが表示されます。 後者のボタンのウィンドウが自動的に表示されます。 グリッド テンプレートを選択してから、各グリッド アイテムにウィジェットを追加できます。 テンプレートなしでウィジェットを追加するには、[ウィジェットの追加] ボタンをクリックし、ウィジェット ギャラリーから選択するか、[ウィジェットの挿入] パネルからウィジェットをドラッグします。
新しいウィジェットをグリッドにドラッグすると、ウィジェットを配置した場所に応じてレイアウトが自動的に変わります。 ウィジェットがすでに含まれているアイテムの中央に配置した場合、新しいタブに追加されます。
既存のグリッド アイテム上の他の場所に新しいウィジェットを配置した場合、新しいアイテムとして追加され、元のアイテムのスペースに両方のアイテムが均等に配置され、グリッド列またはグリッド行が作成されます。 アイテム間のギャップにポインターを合わせてドラッグすることでグリッドの境界をサイズ変更できます。 アイテムをクリックし、そのアイテムのツールバーで [横方向に分割] または [縦方向に分割] ボタンをクリックして、同様にアイテムを分割することもできます。
複数のグリッド アイテムがすでに含まれているグリッド ウィジェットの上に新しいウィジェットをドラッグした場合、グリッド全体を基準にしてウィジェットを配置できます。 ガイド バーが表示され、これを使用してウィジェットをグリッド全体の上部、下部、左側、右側に配置できます。
カード ウィジェットやマップ ウィジェットなどの一部のウィジェットでは、ウィジェットの内部に他のウィジェットをネストして配置できます。 そのようなウィジェットを追加すると、ウィジェットはデフォルトでロックされた状態になります。 ロック ボタンをクリックしてウィジェットのロックを解除して、内部のウィジェットを再編成できます。 ロックされた状態では、ウィジェットの独自の設定のみを変更できます。 たとえば、描画ウィジェットが含まれているマップ ウィジェットをグリッドに追加した場合、描画ウィジェットを移動するにはマップ ウィジェットをロック解除する必要があります。
[ページ] パネルのアウトラインには、グリッド ウィジェットに含まれるウィジェット、タブ、グリッド列、グリッド行の階層が表示されます。 どのウィジェットでも、アウトラインで任意のグリッド行やグリッド列を選択し、[その他] ボタンをクリックして、操作を行うメニューを表示できます。 グリッド行には [スペースを左右に整列] ボタン、グリッド列には [スペースを上下に整列] ボタンがあります。 行または列によってタブが作成される場合は、行か列の名前を変更できます。 グリッド ウィジェットに含まれる個々のウィジェットの [その他] メニューには、[横方向に分割] ボタンと [縦方向に分割] ボタンがあります。
アプリにグリッド ウィジェットを追加すると、次の操作オプションがユーザーに提供されます (ウィジェットの設定でこれらのオプションを有効にする必要があります)。
- クリックして個々のグリッド アイテムを拡大します。 アイテムにポインターを合わせると、拡大ボタン
が表示されます。 - 各グリッド アイテム間のギャップをドラッグしてグリッド アイテムをサイズ変更します。
注意:
小画面レイアウトでは、グリッド内のすべてのウィジェットが自動的にグリッド タブになります。 ただし、カスタム レイアウトを作成することで各種画面サイズに合わせてグリッドを最適化できます。設定
グリッド ウィジェットには次の設定があります。
- [レイアウト] - レイアウトの設定を構成します。
- [パディング] - ウィジェットの内側エッジの周囲のパディング スペースのサイズをすべて一度にまたは個別に変更します。 サイズの値はピクセル (px) またはパーセント (%) で指定できます。
- パディングの色 - ウィジェットの内側エッジの周囲のパディング スペースの色も変更できます。
- [ギャップ] - グリッド アイテム間のスペースの色と幅を変更します。 幅の値はピクセル (px) で指定できます。
- [グリッド アイテム] - 実行時にユーザーがグリッド アイテムをどのように操作できるかを定義します。
- [サイズ変更を許可] - ユーザーがギャップをドラッグしてグリッド アイテムをサイズ変更できるようにします。
- [拡大を許可] - ユーザーが個々のグリッド アイテムを拡大できるようにします。
注意:
この設定は、ウィジェットの [スタイル] 設定タブでオーバーライドできます。 これは、ユーザーが一部のグリッド アイテムは展開できるが他はできないようにする場合に便利です。