レイアウト

概要

Avonni Layout コンポーネントは、Experience Cloud サイト上のコンテンツ表示を最適化および合理化するよう設計されています。配置と表示の選択肢を組み合わせることで、サイトのコンテンツが整理され、レスポンシブで、さまざまなデバイスサイズに合わせて調整されます。

このコンポーネントは スロットを活用します 高度なカスタマイズを可能にするため、LWR サイトに最適です。Aura サイトはこのレベルのカスタマイズをサポートしていません。

🎥 チュートリアル

名前	説明
グリッドレイアウトを作成する	製品や機能を表示するために、Avonni コンポーネントで動的なグリッドレイアウトを作成する方法を学びます。
Avonni Layout をレスポンシブに構成する	Experience Cloud で Avonni Layout を使用して、さまざまなデバイスに対応したレスポンシブでユーザーフレンドリーなレイアウトを作成する方法を学びます。

プロパティ

名前	説明	使用法
水平方向の配置	レイアウト内のコンテンツの水平方向の配置を調整します	この設定を使用してコンテンツを一貫して整列させ、レイアウト全体でバランスの取れた調和のある見た目を保ちます。
垂直方向の整列	レイアウト内のコンテンツの垂直方向の配置を操作します。	コンテンツの垂直配置を最適化し、全体のデザイン目標に合致する視覚的に魅力的な形で表示されるようにします。
境界まで引き伸ばす	コンテンツがレイアウトの境界に向かって拡張できるようにします。	このオプションを使用して、スペースを最大限に活用し、コンテンツ要素の視認性と表示を向上させるレイアウトを作成します。
複数行	複数行にわたるコンテンツの収容を有効にします。	レイアウトでコンテンツを縦方向に配置する必要がある場合にこの機能を有効にし、構造化された整理された表示を促進します。
セクションとして表示	レイアウトをページ内の独立したセクションとして表示するよう設定します。	レイアウトをページ内の独立したセクションとして表示するよう設定します。
カラムレイアウト	コンテンツがカラム内でどのように表示されるかを決定します。	カラム構成をカスタマイズしてグリッド状の構造を確立し、視覚的なナビゲーションを向上させる体系的で整然としたコンテンツ配置を促進します。

カラムレイアウト設定

カラムレイアウト設定は、ページコンテンツの整理に柔軟性を提供し、異なる画面サイズやデバイスに対してレスポンシブに適応しつつ、クリーンで構造化された外観を維持します。

タイプ

カラムレイアウトの性質を決定します。

• オプション：

  • 柔軟（フレキシブル）: このレイアウトタイプでは、カラムがコンテンツと利用可能な画面スペースに基づいて動的にサイズを調整します。さまざまなデバイスサイズに対応する必要があるレスポンシブデザインに最適なオプションです。

  • 固定: このオプションは、画面サイズやコンテンツ量に関係なくカラムのサイズを一定に保ちます。均一で一貫したレイアウトが必要な場合に役立ちます。

• 使用法： 選択してください 柔軟（フレキシブル） 異なる画面サイズに合わせて調整する流動的なレイアウトの場合に、そして 固定 カラム幅の一貫性が求められるレイアウトの場合に。

サイズ

グリッド内のカラムの幅を設定します。グリッドシステムは通常12ユニット構造に基づきます。

• 範囲： 1から12まで。各ユニットは利用可能な全幅に対する比率を表します。

• 使用法： 各カラムが占めるスペース量を定義するためにサイズを割り当てます。たとえば、12ユニットのグリッドでサイズを4に設定すると、そのカラムは利用可能な横幅の3分の1を占めることになります。

配置のずらし（アライメントバンプ）

カラムをそのコンテナ内での位置を調整します。

• オプション：

  • 左: カラムをコンテナの左端に寄せます。

  • 右: カラムを右端に寄せます。

  • 上: カラムをコンテナの上部寄りに配置します。

  • 下（ボトム）: カラムをコンテナの下部付近に配置します。

• 使用法： この設定を使用してカラムの周囲に対する位置を微調整し、レイアウトの視覚的魅力と空間バランスを向上させます。

パディング

カラムの内部の余白（スペーシング）を制御します。

• オプション：

  • 水平: カラムの左右のパディングを調整します。

  • 周囲（オール）: カラムの全辺にパディングを追加します。

• 使用法： パディングを適用してカラム内部にスペースを作り、コンテンツが端にぴったりとくっつかないようにして、可読性と視覚的美観を向上させます。

Avonni Layout コンポーネントのカラムレイアウト設定は、Salesforce Experience Cloud サイトで洗練され機能的なレイアウトを作成するために不可欠です。