コンテナー レイアウト

コンテナー レイアウトを使用して、複雑なアプリ レイアウトを作成します。

[コンテナー レイアウト] コントロールを追加すると、既定で 1 つのコンテナーが利用可能になります。単純なコンテナーをさらに追加するには、既存のコンテナーの境界の「+」アイコンをクリックします。

レイアウト内でコンテナーを再配置するには、コンテナーを目的の位置にドラッグ アンド ドロップします。

コンテナーのサイズを変更するには、コンテナーの隅をドラッグします。

コンテナーを削除するには、コンテナーを選択し、キーボードの Delete キーを使用します。または、ツリー ビューでコンテナーを右クリックして [削除] を選択します。

[コンテナー レイアウト] コントロールには、以下の 2 種類のプロパティがあります。

• コンテナー レイアウト用のもの

• レイアウト内のすべてのコンテナー用のもの

注:

[コンテナー レイアウト] コントロールをページ レベルで使用して、ページをさまざまなセクションに構造化することをお勧めします。

ページ内のコントロールの位置を揃えて配置するには、[コンテナー] コントロールを使用します。

重要: 設計時と実行時のメンテナンスを容易にして一貫性を確保するため、コンテナー レイアウトを入れ子にしないようにします。

コンテナー レイアウトのプロパティ

全般

• 非表示 - true の場合、実行時にコントロールが非表示になります。

• 無効化 - true の場合、実行時にコントロールを無効化します。

イベント

イベントはありません。

スタイル

• 背景色 - レイアウトの背景色です。
• フォント - コンテナー レイアウトのフォント ファミリです。レイアウト内のすべてのコンテナーで同じフォント ファミリが使用されます。
• マージン- レイアウトのマージンです。既定では 0px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。
• パディング - レイアウトのパディングです。既定では、0px のパディングが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティは、[パディング] セクションの右側にある [リンク] ボタンをクリックして解除できます。

• サイズ - レイアウトの幅と高さです。既定では、[幅] は [100px]、[高さ] は [auto] に設定されており、内部のコンテナーに基づいてレイアウトを拡大できます。

コンテナーのプロパティ

全般

• ツールチップ - コンテナーに表示するツールチップです。このツールチップで、コントロールに表示する追加情報を提供します。

• 非表示 - true の場合、実行時にコントロールが非表示になります。

• 無効化 - true の場合、実行時にコントロールを無効化します。

イベント

• クリック時 - コンテナーがクリックされた際の挙動を設定します。

スタイル

• レイアウト - コンテナー内のコントロールの位置を決定します。

  • 横方向/縦方向 - コントロールの向きです。
  • 配置- コンテナー内のコントロールの配置です。
  • 折り返しを許可 - 選択すると、コントロールがコンテナー内で折り返されます。

  • スクロールを許可 - 選択すると、コンテナー内でのスクロールが許可されます。

• 背景色 - コンテナーの背景色です。
• 枠線 - コントロールの枠線です。枠線の太さ、色、半径を設定できます。
• フォント - コンテナー レイアウトのフォント ファミリです。コンテナー内のすべてのコントロールで同じフォント ファミリが使用されます。既定では、このコントロールの直接の親コンテナーのフォント ファミリが継承されます。その場合、フォントに「Inherited」と表示されます。
• マージン- レイアウトのマージンです。既定では 0px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。
• パディング - レイアウトのパディングです。既定では、0px のパディングが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティは、[パディング] セクションの右側にある [リンク] ボタンをクリックして解除できます。

• 詳細設定 - コントロールの flex プロパティを表示します。

  • Flex basis - Flex 項目の元のサイズを設定してから、余分なスペースを均等に割り付けるか、除去します (px、%、em、auto)。

  • 伸び率 - 余分なスペースがある場合、flex 項目を、他の項目を基準にしてどれだけ拡大するかを指定します。

  • 縮み率 - 十分なスペースがない場合、flex 項目を、他の項目と比較してどれだけ縮小するかを指定します。

    詳しくは、Mozilla Developer Network のドキュメントをご覧ください。