コンポーネントのバリアントを作成する

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

SXAにはデフォルトのコンポーネントセットが付属しています。再利用性を促進するために、デザイナーやフロントエンド開発者はバリアントを作成することもできます。バリアントはデフォルトコンポーネントのカスタマイズ可能な適応です。これにより、著者はコンテンツの提示方法においてより多くの選択肢が得られます。

バリアントの作成は2ステップのプロセスです。まず、関連するコンポーネントTSXファイル(例えばPromo.tsx)でバリアントのコードを作成します。次にコンテンツエディターでバリアントを作成し、コードで定義されたバリアントを参照します。

構成要素のTSXファイルは以下のディレクトリにあります:

[アプリケーションルート]\src\componentss]

コード例:

以下の例は、Promoコンポーネントの2つのバリアントを示しています

。 Defaultバリアントはテキストフィールドをレンダリングし、Linkバリアントはテキストフィールドとリンクをレンダリングします。

export const Default = (props: PromoProps): JSX.Element => { if (props.fields) { return (

); }

return <PromoDefaultComponent {...props} />; };

export const Link = (props: PromoProps): JSX.Element => { if (props.fields) { return (

); }

return <PromoDefaultComponent {...props} />; };

コンテンツエディターでバリアントを作成するには:

コンテンツエディターでサイトをクリックし、「Presentation/Headless Variants」フォルダを開きます。このフォルダにはバリアントを許可するすべてのコンポーネントが一覧化されています。

!注フォルダにコンポーネントを追加するには、管理者に連絡してください。
バリアントを追加したいコンポーネントを右クリックし、「挿入」を選択し、「 バリアント定義」を選択します。
コード内のバリアント名と一致する名前を入力し、OKをクリックします。例えばLink。
バリアント詳細セクションで、バリアントが利用可能なページテンプレートを指定します。該当するページテンプレートをダブルクリックして選択したアイテムのリストに移動し、その後「保存」をクリックします。テンプレートが選択されていない場合は、バリアントはすべてのページで利用可能です。
オプションで、外観セクションでバリアントのサムネイル画像を追加できます。この画像は バリアント リストに表示され、コンテンツ編集者が目的に最適なバリアントを選ぶのに役立ちます。

コンテンツエディター

エクスペリエンスエディター
変更を保存してください。

この記事を改善するための提案がある場合は、お知らせください!