Image List Item
Image List Itemレスポンシブ対応コンポーネント（AlexaImageListItem）は、リストの形式で画像とテキストを表示します。このコンポーネントは、AlexaImageレスポンシブ対応コンポーネントを使用して項目のサイズと形式を設定します。AlexaImageListItem項目のリストを表示するには、AlexaImageListレスポンシブ対応テンプレートを使用します。
alexa-layoutsパッケージを読み込む
AlexaImageListItemを使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layoutsパッケージの最新バージョンは1.1.0です。AlexaImageListItemはバージョン1.1.0で導入されました。
AlexaImageListItemパラメーター
type以外のパラメーターはすべてオプションです。
| 名前 | 型 | デフォルト | 説明 | 追加されたバージョン |
|---|---|---|---|---|
|
|
文字列 |
|
1.1.0 |
|
|
|
ブール値 |
false |
trueの場合、リスト項目の横に数字を表示しません。 |
1.1.0 |
|
|
文字列 |
center |
バウンディングボックス内での画像の位置を設定する方法を決定します。画像がバウンディングボックスより小さい場合に使用されます。オプションは、bottom、bottom-left、bottom-right、center、left、right、top、top-left、top-rightです。このプロパティは、 |
1.1.0 |
|
|
文字列 |
square |
アイテムの画像バウンディングボックスに使用するアスペクト比です。オプションは、square、round、standard_landscape、standard_portrait、poster_landscape、poster_portrait、widescreenです。このプロパティは、 |
1.1.0 |
|
|
ブール値 |
false |
trueの場合、画像の背後にその画像のコピーをぼかして表示します。 |
1.1.0 |
|
|
ブール値 |
false |
trueの場合、画像とテキストコンテンツの間のオーバーレイ（レイヤー）を非表示にします。 |
1.1.0 |
|
|
ブール値 |
false |
trueの場合、小型デバイスで |
1.1.0 |
|
|
数値 |
0 |
1から100までの数値に設定すると、指定したパーセンテージに基づいて画像上に進捗バーが表示されます。これにより、ユーザーは項目のステータスを一目で確認できます。0に設定すると、進捗バーが非表示になります。 |
1.1.0 |
|
|
ブール値 |
true |
trueの場合、画像に角丸を使用します。 |
1.1.0 |
|
|
文字列 |
best-fit |
バウンディングボックス内に収まるように画像を拡大縮小する方法を決定します。オプションは、none、fill、best-fit、best-fill、best-fit-downです。このプロパティは、 |
1.1.0 |
|
|
文字列 |
表示する画像のURLです。 |
1.1.0 |
|
|
|
ユーザーがリスト項目を選択したときに実行されるアクションです。 |
1.1.0 |
||
|
|
文字列 |
リスト項目に表示する第1テキストです。 |
1.1.0 |
|
|
|
文字列 |
画像上に表示するプロバイダーテキストです。 |
1.1.0 |
|
|
|
文字列 |
リスト項目の第2テキストです。 |
1.1.0 |
|
|
|
文字列 |
リスト項目の第3テキストです。 |
1.1.0 |
|
|
|
文字列 |
dark |
指定したテーマ（lightまたはdark）に応じて色が切り替わります。デフォルトのテーマはdarkです。 |
1.1.0 |
画像サイズ、アスペクト比、拡大縮小
AlexaImageListItemレスポンシブ対応コンポーネントは、事前に定義された高さと幅を使用します。高さと幅は、指定したimageAspectRatioとViewportの特性によって決まります。
アスペクト比、拡大縮小、配置は、AlexaImageレスポンシブ対応コンポーネントの場合と同じように機能します。詳細については、画像のアスペクト比と拡大縮小の例を参照してください。
AlexaImageListItemの例
以下は、すべてのテキストオプションと進捗バーを設定したAlexaImageListItemの例です。
{
"type": "AlexaImageListItem",
"theme": "dark",
"primaryText": "${exampleData.primaryText}",
"secondaryText": "${exampleData.secondaryText}",
"tertiaryText": "${exampleData.tertiaryText}",
"providerText": "${exampleData.providerText}",
"imageProgressBarPercentage": 75,
"imageRoundedCorner": true,
"imageAspectRatio": "square",
"imageSource": "${exampleData.imageSource}"
}