Image List Item



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以外のパラメーターはすべてオプションです。

名前 デフォルト 説明 追加されたバージョン

defaultImageSource

文字列

imageSourceが提供されていない場合に使用するデフォルト画像のURIです。これは、画像コンテナが空にならないようにするために使用します。

1.1.0

hideOrdinal

ブール値

false

trueの場合、リスト項目の横に数字を表示しません。

1.1.0

imageAlignment

文字列

center

バウンディングボックス内での画像の位置を設定する方法を決定します。画像がバウンディングボックスより小さい場合に使用されます。オプションは、bottom、bottom-left、bottom-right、center、left、right、top、top-left、top-rightです。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageAlignmentプロパティと同じように機能します。

1.1.0

imageAspectRatio

文字列

square

アイテムの画像バウンディングボックスに使用するアスペクト比です。オプションは、square、round、standard_landscape、standard_portrait、poster_landscape、poster_portrait、widescreenです。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageAspectRatioプロパティと同じように機能します。ただし、バウンディングボックスの高さと幅はアスペクト比に基づいて事前に定義されており、変更することはできません。

1.1.0

imageBlurredBackground

ブール値

false

trueの場合、画像の背後にその画像のコピーをぼかして表示します。imageScalefillまたはbest-fillに設定されている場合は無視されます。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageBlurredBackgroundプロパティと同じように機能します。

1.1.0

imageHideScrim

ブール値

false

trueの場合、画像とテキストコンテンツの間のオーバーレイ(レイヤー)を非表示にします。

1.1.0

imageMetadataPrimacy

ブール値

false

trueの場合、小型デバイスでsecondaryTexttertiaryTestの両方を非表示にします。

1.1.0

imageProgressBarPercentage

数値

0

1から100までの数値に設定すると、指定したパーセンテージに基づいて画像上に進捗バーが表示されます。これにより、ユーザーは項目のステータスを一目で確認できます。0に設定すると、進捗バーが非表示になります。

1.1.0

imageRoundedCorner

ブール値

true

trueの場合、画像に角丸を使用します。

1.1.0

imageScale

文字列

best-fit

バウンディングボックス内に収まるように画像を拡大縮小する方法を決定します。オプションは、none、fill、best-fit、best-fill、best-fit-downです。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageScaleプロパティと同じように機能します。

1.1.0

imageSource

文字列

表示する画像のURLです。

1.1.0

primaryAction

コマンド

ユーザーがリスト項目を選択したときに実行されるアクションです。

1.1.0

primaryText

文字列

リスト項目に表示する第1テキストです。

1.1.0

providerText

文字列

画像上に表示するプロバイダーテキストです。

1.1.0

secondaryText

文字列

リスト項目の第2テキストです。

1.1.0

tertiaryText

文字列

リスト項目の第3テキストです。

1.1.0

theme

文字列

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}"
}