次の方法で共有


コンテナー モジュール

コンテナー モジュールを使用すると、小規模なコンポーネント モジュールから複雑なモジュールやページを作成する際のレイアウトを制御できます。 たとえば、コンテナー モジュールは、ヘッダー、フッター、または内部に入れ子になったモジュールが入れ子になったボックス モジュールなどです。

コンテナー モジュールは、テンプレートの作成者に公開される「スロット」を定義できます。 スロットはコンテナー モジュール内の地域と考えることができます。 ページ作成者は、各スロットに入るモジュールを構成できます。 コンテナー モジュールのコードは、変更要素の HTML レイアウトを担当します。

構成設定は、ページ作成者に公開することもできます。 これにより、ページ作成者はコンテナー モジュールのレイアウトを追加で構成できます。 コンテナー モジュールは、モバイル デバイス画面または完全な Web ブラウザーで表示されるかどうかに関係なく、モジュールが任意のサイズで動作するかどうかを保証するために、インストール後のデザインを作成する責任を負います。

コンテナー モジュールは、通常のモジュールと同様に作成されます。 ただし、MODULE_NAME.definition.json ファイルで、次の例に示すように $type 値を変更する必要があります。

"$type": "containerModule"

コンテナー モジュールには、レイアウト コンテナー モジュールとページ コンテナ モジュールの 2 つのタイプがあります。

レイアウト コンテナー モジュール

レイアウト コンテナ モジュールは、複数の単純なモジュールから複雑なモジュールを作成する必要がある場合や、これらの単純なモジュールのレイアウトを制御する場合に便利です。 たとえば、必須またはオプションのサブ モジュール (検索、サイン イン、ナビゲーション モジュールなど) から構成されるヘッダー レイアウト コンテナー モジュールを使用できます。 レイアウト コンテナーの目的は、変更レイアウトを提供するために行います。

詳細については、 レイアウト コンテナー モジュールの作成を参照してください。

ページ コンテナー モジュール

ページ コンテナ モジュールには、ページ作成のコア構造が含まれています。 たとえば、スロットがヘッダー領域、メイン コンテンツ領域、およびフッター領域に対して定義されているページ コンテナーを作成できます。 ページ コンテナーは、名前の付いた一連の変更を制御するモジュールであり、ページのルートにのみ埋め込みできます。 各ページには、ページ コンテナーは 1 つだけである必要があります。 このページのコンテナーは、作成ツールのテンプレートに追加されます。

レイアウト コンテナー モジュールと同様に、ページ コンテナー モジュールは、テンプレート作成者に公開される名前付きオブジェクトを定義できます。 ページ作成者は、各スロットに移動するモジュール、およびそれらのスロットのレイアウトを管理するコンテナーのレンダリング コードを構成できます。 構成設定をページ作成者に公開して、レイアウトの追加を構成することができます。

詳細については、 ページ コンテナー モジュールの作成を参照してください。

追加リソース

新しいモジュールの作成

モジュール ライブラリ モジュールの複製

モジュール構成フィールドの追加

モジュールのプレビューとデバッグ

モジュール モックを使用してモジュールのテスト

ページ モックを使用してモジュールのテスト

モジュールのローカライズ