埋め込み用コンポーネント

複雑なレイアウトをより効率的に構築および維持するために、コンポーネントを相互に埋め込む作業に着手します。例として、ボタンをコンポーネントに変換することを検討してください。後で、このボタン コンポーネントをサイト全体のさまざまな他のコンポーネントに埋め込むことができます。ナビゲーション コンポーネント、ヒーロー セクション コンポーネント、または機能カード コンポーネント内に配置することで、各コンポーネントを一元的に更新し、変更が他のすべてのインスタンスにカスケードされるのを確認する柔軟性が得られます。

このセッションでは以下のことを学びます。

1. 既存のコンポーネントを埋め込むテクニック
2. 既存のコンポーネントの一部から新しいネストされたコンポーネントを設計する手順
3. ネストされたコンポーネント属性と親コンポーネント属性間のリンクを確立する

既存のコンポーネントを埋め込む

既存のコンポーネントを別のコンポーネント内に埋め込むには:

1. 別のコンポーネントを配置するための目的のコンポーネントを選択します
2. 主要コンポーネントを変更する
3. アクセス コンポーネントパネル （または、キーボードショートカットを使用する） シフト + あ)
4. パネルからコンポーネントをドラッグし、キャンバスまたはナビゲータで選択したコンポーネントに放します。

既存の要素から新しいネストされたコンポーネントを作成する

既存のコンポーネント内に新しいコンポーネントを作成するには:

1. 別のコンポーネントを挿入するコンポーネントを選択します
2. メインコンポーネントを変更する
3. コンポーネントに変換する要素を選択します
4. アクセス スタイルパネル または 要素設定パネル
5. 「コンポーネントを作成するパネル上部の「
6. 新しいコンポーネントに名前を付けて 作成する

さらに、すでにコンポーネントをホストしている親要素からコンポーネントを生成し、親コンポーネント内に子コンポーネントをネストすることも可能です。

ネストされたコンポーネント属性を親コンポーネント属性と揃える

すでに定義されたコンポーネント属性を持つコンポーネントを、同じくコンポーネント属性を持つ別のコンポーネント内に埋め込むと、ネストされたコンポーネントの属性を親コンポーネントの属性にリンクするかどうかを選択できます。これにより、ネストされたコンポーネントの属性が親コンポーネント インスタンスから変更された値を活用できるようになります。

たとえば、ヘッダー、本文、ボタンを含むカードがあるとします。カードはコンポーネントとして機能し、カード内のボタン要素はコンポーネント (つまり、ネストされたコンポーネント) として機能します。コンポーネント内の各要素に定義されたコンポーネント属性が付属している場合は、ボタンテキストをカード内の任意のテキストにリンクするオプションが保持されます。

ネストされたコンポーネントの属性と親コンポーネントの属性間の接続を確立するには:

1. ネストされたコンポーネントを格納する親コンポーネントを選択し、そのメインコンポーネントを変更します。
2. 親コンポーネント属性へのリンクを必要とする要素を含むネストされたコンポーネントのメインコンポーネントを変更します。
3. 要素をクリック
4. に移動 要素設定パネル 属性を作成する
5. ネストされたコンポーネントのメインコンポーネントを終了する
6. 親コンポーネントのプライマリコンポーネントに移動する
7. 右側のパネルにアクセス
8. 紫色の「ドットリンクの属性の隣にある「」アイコン
9. 選択する "新しい属性を作成して接続する” 属性を作成する
10. 親コンポーネントのメインコンポーネントを終了する
11. 親コンポーネントのインスタンスを選択する
12. 右側のパネルをご覧ください
13. 属性に値を割り当てる