JSS提供のフィールドヘルパーコンポーネントVue.js
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSS for Vue.jsは、Sitecoreフィールド値のレンダリングを支援する補助コンポーネントを提供します。
sitecore-jss-vueから露出したヘルパーコンポーネントは、通常ステートを持つコンポーネントであるPlaceholderを除き、状態のない関数型コンポーネントです。
Vue.jsにおける属性継承に従い、コンポーネントに渡された非プロパティ属性は囲みタグ上でHTML属性として描画されます。コンポーネントに渡されたイベントも伝播されます。
!注sitecore-jss-vueから公開されたヘルパーコンポーネントは、app.component()などの方法でグローバルに登録されていません。これはグローバルコンポーネント空間を汚染しないように、またWebpackやRollupのようなバンドルツールの木構造調整機能と整合させる意図的なものです。したがって、自分のコンポーネントで使いたいヘルパーコンポーネントはローカルで要求またはインポートする必要があります。
以下は、サポートされているすべてのフィールドヘルパーコンポーネントの一覧であり、それらの使い方の例を示します。以下の例では、フィールドデータはプレースホルダーコンポーネントによって提供されています。
本文
以下の表は入力の性質を示しています:
名称
概要
デフォルト
field
レンダリングしたいフィールド。通常はSitecoreのフィールドタイプのうち、単行テキストまたはマルチラインテキストのいずれかですが、数値タイプも使えます。
-
tag
テキスト値をラップするためのHTML要素の名前です。
span
editable
エディターを使うかSitecore形式のHTML出力を使うかを示します。
true
encode
出力値のエンコーディングHTML有効または無効化します。偽値はまた editable: falseを意味します。
true
マルチラインテキストの場合、提供された編集可能な値では、行切れが
に置き換えられます。編集不可の値を使えば、field.value処理してJSONの換行を望むマークアップに置き換えたり、CSSの白字表示値(プリラップ)を使うことができます。
リッチテキスト
以下の表は入力の性質を示しています:
名称
概要
デフォルト
field
レンダリングしたいフィールド。Sitecoreのリッチテキスト型でなければなりません。
-
tag
HTML 要素名がリッチテキスト値をラップします。
div
editable
エディターを使うかSitecore形式のHTML出力を使うかを示します。
true
画像
Imageコンポーネントは、コンポーネントに属性として提供されている場合、srcSet属性に特別な扱いを与えます。 srcSetの各要素に対してクエリ文字列パラメータを表すオブジェクトの配列を提供できます。これにより、sizesプロパティと組み合わせることでサーバー側レンダリング付きのレスポンシブ画像が可能になります。
以下の表は入力の性質を示しています:
名称
概要
デフォルト
media
レンダリングしたいルートフィールドです。Sitecore画像タイプでなければなりません。
-
editable
Sitecore形式の出力を使用する必要があるかどうかを示します。
true
imageParams
画像URLに追加する クエリ文字列のパラメータ 。
> [!注]
> JSSメディアURLのセキュリティハッシュをサポートしていないため、これらのパラメータセットは サーバー上でホワイトリスト化されなければなりません。
-
リンク
以下の表は入力の性質を示しています:
名称
概要
デフォルト
field
レンダリングしたいルートフィールドです。SitecoreのGeneral Linkタイプでなければなりません。
-
editable
エディターを使うかSitecore形式のHTML出力を使うかを示します。
> [!注]
> Sitecoreの編集可能な出力を使用する場合、LinkはSitecore提供されたマークアップの周りにラッパースパンを作成し、そのスパンにホスト要素の属性を適用します。
true
ファイル
以下の表は入力の性質を示しています:
名称
概要
field
レンダリングしたいルートフィールドです。Sitecoreファイルタイプでなければなりません。
!重要ファイルフィールドはSitecoreのエクスペリエンスエディターでのインライン編集をサポートしていませんが、コンポーネントのデフォルトフィールドエディターを使って編集できます。
日付
以下の表は入力の性質を示しています:
名称
概要
デフォルト
field
レンダリングしたいフィールド。Sitecore Date型でなければなりません。
-
tag
日付値をラップするHTML要素の名前。
span
editable
Experience Editor/Sitecore形式のHTML出力を使う必要があるかどうかを示します。
true
formatter
フィールド値を解析された JavaScript Date オブジェクトとして受け取り、その値をコンポーネントのラッピング tag でレンダリングする関数です
-