レイアウト要素の使用
For Liferay 7.4 U22+/GA22+
レイアウト要素とは、ページやテンプレートのレイアウトを設計するためのドロップゾーンを定義するものです。 デフォルトでは、Liferayは2つのレイアウトエレメントを含んでいます。 Containers と Grids 。 このドロップゾーンにウィジェットやフラグメントをドラッグ&ドロップすることで、コンテナやグリッドを追加し、より複雑なレイアウトを作成することができます。 レイアウト設計後、レイアウト構成を保存して、他のページやテンプレートで再利用することができます。 詳細については、 フラグメント構成の保存 を参照してください。
フラグメントをサポートする新しいページやテンプレートを作成すると、デフォルトのドロップゾーンが表示されます。 この領域には任意のフラグメントを追加できますが、コンテナフラグメントをコンポジションの最初の要素として使用することには重要な利点があります。
- 高度なコンポジション用のフレックス表示プロパティを含む、ページデザインに対するより大きなレイアウト制御 (Liferay DXP 7.4+)。
- のコンポジションを保存し、他のページやテンプレートで素早く再利用することができます。
- フラグメント・コンポジションにURLやページのリダイレクトを追加する。
- スタイルブック を活用し、サイトの外観を標準化する。
コンテナを追加したら、グリッドフラグメントを使用して、異なるビューポート用にコンテンツのレイアウトをカスタマイズすることができます。 詳細については、 グリッドフラグメントを使用したレスポンシブレイアウトの構築 を参照してください。
コンテナやグリッドに要素をドラッグ&ドロップすると、Liferayはドロップゾーンをハイライト表示し、配置場所を示します。 一度追加した要素は、ブラウザのサイドパネル(( ) )にドラッグ&ドロップして並べ替えができます。
コンテナ
旧称: パネル
コンテナフラグメントは、設定可能なドロップゾーンをコンテンツページに追加します。 標準的な設定オプションに加え、コンテナのHTMLタグ、表示構造などを設定できます。 詳しくは、 フラグメントの設定 を参照してください。
グリッド
旧称: 行数:
グリッドフラグメントは、ページやテンプレートに複数のドロップゾーンモジュールを追加します。 これらのモジュールは、水平および垂直に配置できます。 標準的な設定オプションに加え、各グリッドのモジュール数、1行あたりのモジュール数、各モジュールのコンテンツの垂直方向の配置を決定することができます。 各モジュールの幅を手動で調整し、モジュール間のパディングを追加・削除することができます。 詳しくは、 フラグメントの設定 を参照してください。