レイアウト要素の使用

レイアウト要素の使用

For Liferay 7.4 U22+/GA22+

レイアウト要素とは、ページやテンプレートのレイアウトを設計するためのドロップゾーンを定義するものです。 デフォルトでは、Liferayは2つのレイアウトエレメントを含んでいます。 ContainersGrids 。 このドロップゾーンにウィジェットやフラグメントをドラッグ&ドロップすることで、コンテナやグリッドを追加し、より複雑なレイアウトを作成することができます。 レイアウト設計後、レイアウト構成を保存して、他のページやテンプレートで再利用することができます。 詳細については、 フラグメント構成の保存 を参照してください。

コンテナとグリッドのフラグメントは、ページのレイアウトをデザインするためのものです。

フラグメントをサポートする新しいページやテンプレートを作成すると、デフォルトのドロップゾーンが表示されます。 この領域には任意のフラグメントを追加できますが、コンテナフラグメントをコンポジションの最初の要素として使用することには重要な利点があります。

コンテナを追加したら、グリッドフラグメントを使用して、異なるビューポート用にコンテンツのレイアウトをカスタマイズすることができます。 詳細については、 グリッドフラグメントを使用したレスポンシブレイアウトの構築 を参照してください。

tip

コンテナやグリッドに要素をドラッグ&ドロップすると、Liferayはドロップゾーンをハイライト表示し、配置場所を示します。 一度追加した要素は、ブラウザのサイドパネル(( Browser ) )にドラッグ&ドロップして並べ替えができます。

コンテナ

旧称: パネル

コンテナフラグメントは、設定可能なドロップゾーンをコンテンツページに追加します。 標準的な設定オプションに加え、コンテナのHTMLタグ、表示構造などを設定できます。 詳しくは、 フラグメントの設定 を参照してください。

コンテナには、標準的な構成オプションと独自の構成オプションがあります。

グリッド

旧称: 行数:

グリッドフラグメントは、ページやテンプレートに複数のドロップゾーンモジュールを追加します。 これらのモジュールは、水平および垂直に配置できます。 標準的な設定オプションに加え、各グリッドのモジュール数、1行あたりのモジュール数、各モジュールのコンテンツの垂直方向の配置を決定することができます。 各モジュールの幅を手動で調整し、モジュール間のパディングを追加・削除することができます。 詳しくは、 フラグメントの設定 を参照してください。

グリッドには、標準的な構成オプションと独自の構成オプションがあります。

追加情報