ダッシュボードのレイアウト

ダッシュボードは、画面の 100% を必ず占めるように設計された 1 つ以上のエレメントで構成されます。 ダッシュボードを作成する場合には、デスクトップ ビューとモバイル ビューを作成できます。 各ビューのレイアウトは、表示に使用するデバイスで最適になるように構成する必要があります。

ダッシュボードのビューのレイアウトは行と列で構成されます。 ビューにエレメントを追加すると、そのエレメントは [ビュー] ウィンドウのレイアウト ツリーに追加されます。 レイアウト ツリーは、ビューを構成している行および列とそこに含まれているエレメントの概要を示します。 行は、ダッシュボード レイアウトで横に並んで表示されるエレメントです。 行は、ダッシュボード レイアウトで縦に並んで表示されるエレメントです。 レイアウト ツリーの行または列にポインターを置くと、そこに含まれるエレメントがハイライト表示されます。

デスクトップ ビューのレイアウト

ダッシュボードのデフォルト レイアウトは、デスクトップでの表示に合わせて最適化されます。 ブラウザーのサイズを変更すると、それに適合するようにエレメントのサイズが変更されます。 デスクトップのレイアウトは、本文、オプションのヘッダー、オプションのサイドバーで構成されます。 本文には、視覚的エレメントをドッキング レイアウトで整理して含めることができます。 ヘッダーには、タイトル、サブタイトル、アイコン、背景画像、メニューだけでなく、セレクターも含めることができます。 サイドバーには、タイトルと説明だけでなく、セレクターも含めることができます。

モバイル ビューのレイアウト

ダッシュボードには、同じエレメントまたは新しいエレメントを含むオプションのモバイル ビューを挿入することができます。 モバイルのレイアウトは、本文、オプションのヘッダー、オプションのドロワーで構成されます。 本文には、視覚的エレメントをドッキング レイアウトで整理して含めることができます。 ヘッダーには、タイトルとアイコンを含めることができます。 ドロワーは、セレクターをホストするために使用されます。

レイアウトの管理

ダッシュボードのほとんどのエレメントは、移動サイズ変更積み重ねグループ化することで配置できます。 再配置できないエレメントは、ヘッダーサイドバードロワーだけです。 これらのエレメントはダッシュボードのビュー上の定義済みのスペースを占め、ビューには各エレメントを 1 つだけ含めることができます。

ヒント:

ダッシュボードのレイアウト作業を行っているときに、その作業を保存します。 ダッシュボードの複製を作成するには、[保存] ボタン Save をクリックしてから [名前を付けて保存] をクリックします。

エレメントの移動

エレメントを移動して、ダッシュボードで再配置できます。 レイアウトでエレメントを移動すると、レイアウト ツリー内での位置も変わります。

ダッシュボードのビュー上でエレメントを再配置するには、[アイテムのドラッグ] Drag item をクリックしながら、目的の位置のインジケーターに向かってエレメントを移動させます。 ヒントが [新しい位置にドラッグ] から、[列としてドッキング] などの「としてドッキング」を含むテキストに変わったら、マウス ボタンを離します。

エレメントのドッキング

エレメントは行または列としてドッキングできます。 エレメントは、ダッシュボードのビューのセクションや他のエレメントのセクションにドッキングさせることができます。 たとえば、エレメントを列としてビューの右側にドッキングさせたり、列として別のエレメントの右側にドッキングさせたりできます。

エレメントのサイズ変更

エレメントをサイズ変更するには、ポインターが十字線に変わるまで、エレメントの垂直方向または水平方向の枠線の上にポインターを置き、エレメントが目的のサイズになるまで枠線をドラッグします。 エレメントの枠線をドラッグすると、エレメントが占める行または列の割合が表示されます。

エレメントのサイズ変更

行または列全体をサイズ変更し、そこに含まれるエレメントのサイズを均等にすることもできます。 行全体のサイズを変更するには、レイアウト ツリーで、行の横にある [幅を均一にする] ボタン Distribute width evenly をクリックします。 列全体のサイズを変更するには、レイアウト ツリーで、列の横にある [高さを均一にする] ボタン Distribute height evenly をクリックします。

エレメントの積み重ね

複数のエレメントを前後に積み重ねて、各エレメントのタブを作成できます。 エレメントをタブ化すると、一度に 1 つのエレメントだけが表示され、残りのエレメントは非表示になります。 タブを使用すると、表示されるエレメントを選択できます。 モバイル ビューで、ユーザーはタブ付きエレメント間を移動しながら表示することができます。

注意:

タブ化されたエレメントは、他のエレメントとグループ化することはできません。

2 つ以上のエレメントをタブ表示するには、[アイテムのドラッグ] Drag item をクリックしながら、ターゲット エレメントの中央位置インジケーターに向かって、エレメントを移動します。 テキストが [アイテムのスタック] に変わったら、マウス ボタンを離します。 または、別のエレメントの上に直接、新しいエレメントを追加して、タブ付きのビューを作成することもできます。

エレメントの積み重ね

エレメントをスタックに追加すると、新しいタブが作成されます。 タブの名前を変更するには、タブをクリックし、[編集] ボタン [編集] タブ をクリックします。 また、タブをクリックしたままドラッグして、タブ付きエレメントの順序を変更することもできます。

注意:

モバイル ビューにタブが多数存在する場合は、Shift キーを押しながら、タブを水平方向にスクロールすることができます。

エレメントのグループ化

エレメントをグループ化し、ダッシュボード レイアウトで結合することができます。 タブ化とは異なり、エレメントをグループ化しても、グループ内の他のエレメントは非表示になりません。 グループ化により、複数のエレメントを 1 つだけのエレメントのように移動およびサイズ変更し、その間にある余白を非表示にできます。

注意:

グループ化されたエレメントは、他のエレメントまたはグループに積み重ねることができます。

2 つのエレメントをグループ化するには、[アイテムのドラッグ] Drag item をクリックしながら、エレメントを、積み重ねる場合と同様に、ターゲット エレメントの中央の位置インジケーターに向かって移動します。 ただし、マウス ボタンを離す前に、Shift キーを押したままにします。 そうすると、位置インジケーターおよび移動中のエレメントが緑色に変わります。 ヒントが [列としてグループ化] などの「としてグループ化」を含むテキストに変わったら、マウス ボタンを離します。 必ず、Shift キーを離す前にマウス ボタンを離してください。

または、ダッシュボードにエレメントを追加するときに Shift キーを押したままにして、そのエレメントをグループに追加できます。

エレメントのグループ化

行全体または列全体を一度にグループ化することもできます。 行全体または列全体をグループ化すると、そこに含まれるエレメントは自動的にグループ化されます。 行全体または列全体をグループ化するには、行または列の横の [エレメントのグループ化] ボタン Group elements をクリックします。