インスペクトモードでコンポーネントを実験する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Componentsライブラリのインスペクトモードにより、ユーザーはページに追加せずにコンポーネントをプレビュー、操作、設定できます。この機能は、さまざまなシナリオでコンポーネントの挙動や外観をテストしたいユーザーに理想的です。
Componentsライブラリでは、コンポーネントを可視化できます:
-
デフォルトの標準値で。
-
標準値が存在しないフィールドの 可視化値を 用います。
-
右側のパネルにある設定オプションを使ってください。これらのオプションを使って、コンポーネントをページに挿入せずに様々なデザインを試すことができます。
テストした設定や内容の変更はComponentsライブラリに保存できません。
最終的なデザインやコンテンツ設定はContent Editorで行うか、コンポーネントをページに挿入した際のページビルダーの右側パネルで行います。
SitecoreAIコンポーネントにレスポンシブデザインを適用するため、Componentsライブラリで表示されるデバイスのサイズを調整できます。
コンポーネントのバリアントのスタイリングや内容をいじる方法:
-
ナビゲーションヘッダーでDesignをクリックし、ComponentsタブをクリックするとComponentsライブラリを開きます。
-
左側のパネルで、試したいコンポーネントを見つけてクリックします。
-
チェックしたいバリアントのカードにカーソルを合わせるとアクションボタンが表示され、Inspectをクリックします。
-
Inspectモードでは、ドロップダウンメニューを使って別のバリアントや他サイトのバリアントを表示できます。
-
上部のツールバーでは、現在のコンポーネントを表示するかを選択できます。 Mobile、Tablet Portrait、またはDesktop responsiveでレンダリングされます。
-
右側パネルのContentタブで、任意のフィールドの値を入力または編集できます。また、データピッカーを使って異なるデータでコンポーネントをレンダリングすることもできます:
-
コンテンツが ローカルデータソースから来ている場合は、データピッカーを使ってコンポーネントに割り当てられたコンテンツ項目を変更してください。
-
もしGraphQLクエリを使って 外部データソース からコンテンツを取得する場合、コードボックスでクエリを確認できます。
-
-
右側パネルのDesignタブで、Grid layout、Styling 、Advanced stylingの設定オプションを使ってバリアントのデザインを自由に調整できます。
-
Exit inspect modeをクリックして、Components図書館に戻ってください。