フラグメントへのスロットの追加
フラグメントの作成者は、1つ以上のスロットをプレースホルダーとしてフラグメントに追加できるため、フラグメントを使用するユーザーは独自のコンポーネントまたはコンテンツにドロップできます。 たとえば、ユーザーが自分のコンテンツを追加するための挨拶領域が必要だとします。 これを行うには、フラグメントのコンシューマがテキストやイメージなど、必要なものを追加できるスロットを定義します。
フラグメント・スロットはコンポーネント・スロットに似ています。 これらは、コンポーネント・スロットと同様に、使用することも使用しないままにすることもできます。 唯一の違いは、フラグメント・スロットに"default"スロットがないことです。
スロットをフラグメントに追加するには:
- コンポーネント・パレットから、フラグメント・スロットをフラグメントにドラッグ・アンド・ドロップします。
- 必要に応じて他のプロパティを定義します:
- スロット名のかわりにわかりやすい識別子を使用するには、スロットのプレースホルダー領域およびスロット名が表示される場所に表示される「表示名」を入力します。
- エリアに何かドロップできるような視覚的なキューをユーザーに提供するには、「デフォルトのプレースホルダー」を選択して、名前または表示名に基づいてスロットのプレースホルダーを生成します。
- フラグメント・スロットの意味をフラグメント・ユーザーに知らせるには、「説明」を指定します。
- スロットに含めることができるコンテンツのタイプを指定するには、「優先コンテンツ」リストから選択します。 たとえば、スロットにイメージ要素が格納されることが予想される場合は、アバターおよびイメージ・コンポーネントを検索して選択できます。
- フラグメント・ユーザーがカスタム・スロット・コンポーネントでコンテキスト・データを表示できるようにするには、「コンテキスト」を設定します。
- フラグメント・ユーザーがフラグメント内のスロットをカスタマイズできるように、フラグメント・スロットを別のコンポーネント内のスロット(ボタン内のスロットなど)に追加することもできます。 これを行うには:
- ボタンをフラグメント・キャンバスにドラッグ・アンド・ドロップし、必要に応じて設定します。
- フラグメント・スロットをドラッグしてボタンにドロップし、ボタンのスロットを選択します(例:
startIcon): - ボタン・スロットにフラグメント・スロットの名前を入力します(たとえば、iconSlotInButton)。オプションで、他のプロパティを定義します:
ノート:
ベスト・プラクティスとして、フラグメント作成者は、ユーザーが独自に提供しない場合に備えて、定義するスロットにデフォルト・コンテンツを提供する必要があります。 「フラグメント・スロットへのデフォルトのコンテンツの追加」を参照してください。フラグメントをページで使用すると、そのスロット(この例では
greetingおよびiconSlotInButton)がページ・キャンバス(ラベル1)、ページ構造(ここでスロットの表示が選択されているラベル2)およびフラグメントのプロパティ(ラベル3)に表示されます:
フラグメント・コンシューマとして、選択したコンポーネントをフラグメントで明らかにされたスロットに追加できるようになりました。 デモのために、グリーティングの例を続行し、キャンバスのフラグメント・スロットに見出しを追加します。
- 見出しをフラグメント・スロット(
greetingなど)にドラッグ・アンド・ドロップします。 - 必要に応じて、スロット付きコンポーネントのプロパティを更新します。 たとえば、見出しのテキストをページ・レベルの変数にバインドして、挨拶を表示できます:
- ボタン内のスロット内のフラグメント・スロットをカスタマイズするには、フラグメントを選択してフラグメントの「プロパティ」ペインを表示し、選択したコンポーネントをフラグメント・スロットにドラッグ・アンド・ドロップします。 たとえば、コンポーネント・パレットからアイコンをiconSlotInButtonにドラッグします。
または、フラグメントの「プロパティ」ペインでiconSlotInButtonスロットにマウス・ポインタを重ねて、「コンポーネントの挿入」アイコン(
)をクリックします。 このビューでは、スロット・ショーの優先コンポーネントとしてマークされたコンポーネントが表示されます。 優先コンポーネントまたは任意の他のコンポーネントを選択します。
「
図fragmentslot-propertiespane.pngの説明」
- アイコンをフラグメント・スロットにドロップした後は、アイコンを選択してさらにカスタマイズできます:
