Rating
Alexa Ratingレスポンシブ対応コンポーネント（AlexaRating）は、インタラクティブでないグラフィックを使って項目のレーティングを表示します。デフォルトの星画像か、グラフィック用の独自のカスタムアセットを使用できます。
alexa-layoutsパッケージを読み込む
AlexaRatingを使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layoutsパッケージの最新バージョンは1.1.0です。AlexaRatingはバージョン1.1.0で導入されました。
AlexaRatingのパラメーター
type以外のパラメーターはすべてオプションです。
| 名前 | 型 | デフォルト | 説明 | 追加されたバージョン |
|---|---|---|---|---|
|
|
any |
empty |
「空」のレーティングスロット（中が空の星など）を表すグラフィックです。 |
1.1.0 |
|
|
any |
full |
「満点」のレーティングスロット（完全な星など）を表すグラフィックです。 |
1.1.0 |
|
|
any |
half |
「半分」のレーティングスロット（半分の星など）を表すグラフィックです。 |
1.1.0 |
|
|
文字列 |
AVG |
レーティングに使用するグラフィックのタイプです。 |
1.1.0 |
|
|
数値 |
0～5の数値のレーティングです。 |
1.1.0 |
|
|
|
文字列 |
multiple |
レーティング用の1つのグラフィックアセットを表示するか、複数の画像アセットから評価度を構成するかを決定します。 |
1.1.0 |
|
|
3dp |
レーティングスロット間に使用するパディングです。 |
1.1.0 |
|
|
|
文字列 |
レーティングのほかに表示されるテキストです。 |
1.1.0 |
|
|
|
ディメンション |
レーティングを表す1つのグラフィックのバウンディングボックスの幅です。 |
1.1.0 |
|
|
|
any |
レーティングを表すために表示するグラフィックです。 |
1.1.0 |
|
|
|
文字列 |
dark |
指定したテーマ（lightまたはdark）に応じて色が切り替わります。デフォルトのテーマはdarkです。 |
1.1.0 |
単一スロットモードと複数スロットモードについて
AlexaRatingには、ratingSlotModeプロパティで設定されたレーティングを表示するための2つの異なるモードがあります。
- 単一 - 1つの静的グラフィックを表示します。表示するAVGまたは画像と、画像に使用する幅を指定できます。
- 複数 - 0～5の数値（「3.5」など）を使用して、レーティングを表すグラフィックのセットを動的に決定します。このオプションは、各「スロット」の状態（full、half、empty）を表す3つの異なるグラフィックを使用します。たとえば、レーティングが3.5の場合、このオプションでは「full」のグラフィックが3回、「half」のグラフィックが1回、最後に「empty」のグラフィックが1回表示されます。
AlexaRatingレスポンシブ対応コンポーネントには、full、half、およびemptyの状態のデフォルトの「星」のグラフィックが含まれています。これらを使用することも、独自の画像またはAVGを指定することもできます。
以下は、デフォルトの星のグラフィックを使用して3.5のレーティングを表示する例です。
{
"type": "AlexaRating",
"ratingSlotPadding": "4dp",
"ratingSlotMode": "multiple",
"ratingNumber": 3.5,
"ratingText": "509件の評価"
}
以下は、“customRating”として定義された1つのグラフィックを表示する例です。
{
"type": "AlexaRating",
"ratingSlotMode": "single",
"singleRatingGraphic": "customRating",
"ratingText": "609件の評価"
}
AlexaRatingの例
以下は、複数レーティングスロットと単一レーティングスロットの両方の例を表示する包括的なドキュメントの例です。
