Text List Item

Alexaテキストリスト項目レスポンシブ対応コンポーネント（AlexaTextListItem）は、リスト表示用にフォーマットされたテキストを表示します。

互換性

AlexaTextListItemは、以下のビューポートプロファイルに対応するように設計されています。

• alexa-viewport-profilesパッケージの以下のウィジェットビューポートプロファイル：
  • ウィジェット、中（@hubWidgetMedium）
• alexa-viewport-profilesパッケージのすべての標準ビューポートプロファイル：
  • すべての円形デバイスプロファイル
  • すべての横長デバイスプロファイル
  • すべての縦長デバイスプロファイル
  • すべてのモバイルプロファイル
  • すべてのテレビプロファイル

ビューポートプロファイルの詳細については、ビューポートプロファイルを参照してください。

ウィジェットでの相違点

AlexaTextListItemをウィジェット内で使用した場合は、ウィジェットの限られたサイズに合わせて簡略化されたリスト項目が表示されます。

• リスト項目には、第1テキスト、第2テキスト、画像のサムネイルが表示されます。第3テキスト、評価、項目番号は表示されません。
• リスト項目の第2テキストの位置は変更できません。

alexa-layoutsパッケージをインポートする

AlexaTextListItemを使用するには、alexa-layoutsパッケージをインポートします。

alexa-layoutsパッケージの最新バージョンは1.7.0です。AlexaTextListItemはバージョン1.1.0で導入されました。

このページの上部にあるその他のバージョンオプションを使用すると、別のバージョンのAlexaTextListItemドキュメントを確認できます。パラメーターの表には、それぞれのパラメーターが追加されたalexa-layoutsのバージョンが示されています。

AlexaTextListItemパラメーター

次の表は、AlexaTextListItemに設定できるパラメーターを示しています。特に記載のない限り、標準ビューポートプロファイルはすべてのパラメーターをサポートします。「ウィジェットのサポート」列は、各パラメーターをサポートするウィジェットビューポートプロファイルを示しています。ビューポートプロファイルの詳細については、ビューポートプロファイルを参照してください。

type以外のパラメーターはすべてオプションです。

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
accessibilityLabel	文字列	Item: {ordinal} {primaryText} {secondaryText} {tertiaryText} {ratingNumber} out of five stars from {ratingText}	テキストリスト項目を説明する文字列です。ユーザーが項目を選択すると、ボイスオーバーでこの文字列が読み上げられます。	中	1.5.0
componentSlot	コンポーネント	—	リスト項目の最後に表示する対話型のレスポンシブ対応コンポーネントです。使用できるオプションとして、AlexaButton、AlexaRadioButton、AlexaSwitch、AlexaCheckboxのいずれかが推奨されます。	サポートされません	1.7.0
emptyRatingGraphic	任意	empty	「空」の評価スロット（塗りつぶされていない星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 小さいビューポート上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
entities	配列	—	このコンポーネントにバインドするentityデータの配列です。	中	1.2.0
fullRatingGraphic	任意	full	「フル」の評価スロットを表すグラフィックです（完全に塗りつぶされた星など）。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 小さいビューポート上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
halfRatingGraphic	任意	half	「半分」の評価スロットを表すグラフィックです（半分の星など）。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 小さいビューポート上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
hideDivider	ブール値	false	trueの場合、リスト項目の下に表示される水平区切り線を非表示にします。	中	1.1.0
hideHorizontalMargin	ブール値	false	trueの場合、デフォルトの左右のパディングを非表示にします。	サポートされません	1.2.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.2.0
imageBlurredBackground	ブール値	false	trueの場合、画像の背後にその画像のコピーをぼかして表示します。imageScaleがfillまたはbest-fillに設定されている場合は無視されます。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageBlurredBackgroundプロパティと同じように機能します。	中	1.2.0
imageScale	文字列	best-fit	バウンディングボックス内に収まるように画像を拡大縮小する方法を決定します。オプションは、none、fill、best-fit、best-fill、best-fit-downです。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageScaleプロパティと同じように機能します。	中	1.2.0
imageThumbnailShadow	ブール値	true	trueの場合、画像のサムネイルの背後にドロップシャドウを表示します。	中	1.3.0
imageThumbnailSource	文字列	—	リスト項目の横にサムネイルとして表示する画像のURIです。	中	1.2.0
layoutDirection	文字列	${environment.layoutDirection}	コンテンツのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。 レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。	中	1.4.0
primaryAction	コマンド	—	ユーザーがリスト項目を選択したときに実行されるアクションです。指定しない場合、リスト項目はdisabled状態で表示されます。	中	1.1.0
primaryText	文字列	—	リスト項目に表示する第1テキストです。	中	1.1.0
ratingGraphicType	文字列	AVG	評価に使用するグラフィックのタイプです。AVGまたはimageに設定します。 小さいビューポート上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
ratingNumber	数値	-1	0～5の数値のレーティングです。正の数を設定すると、数字が星評価として表示されます。負の数を設定するか、値を設定しない場合は評価が表示されません。	サポートされません	1.2.0
ratingSlotMode	文字列	—	評価用の1つのグラフィックアセットを表示するか、複数の画像アセットから評価度を構成するかを決定します。singleに設定した場合は、singleRatingGraphicプロパティに単一のグラフィックアセットを指定します。multipleの場合は、ratingNumberに数値の評価を指定します。 小さいビューポート上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
ratingText	文字列	—	評価の横に表示するテキストです。ratingNumberが負の数値または省略された場合は無視されます。	サポートされません	1.2.0
secondaryText	文字列	—	各リスト項目の第2テキストです。	中	1.2.0
secondaryTextPosition	文字列	bottom	secondaryTextを表示する位置です。topまたはbottomに設定します。secondaryTextは、primaryTextの先頭にそろえられます。	サポートされません	1.2.0
singleRatingGraphic	任意	—	評価を表すために表示するグラフィックです。ratingSlotModeがsingleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 小さいビューポート上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
singleRatingGraphicWidth	ディメンション	—	評価を表す単一グラフィックのバウンディングボックスの幅です。ratingSlotModeがsingleの場合に使用されます。 小さいビューポート上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
tertiaryText	文字列	—	各リスト項目の第3テキストです。	サポートされません	1.2.0
tertiaryTextPosition	文字列	end	tertiaryTextを表示する位置です。bottomまたはendに設定します。endに設定した場合、tertiaryTextはprimaryTextの後に上揃えで表示されます。bottomに設定した場合、tertiaryTextはprimaryTextの下に表示され、primaryTextの先頭にそろえられます。componentSlotが設定されている場合、endの位置にある第3テキストはコンポーネントスロットによってオーバーライドされます。	サポートされません	1.2.0
textAlignmentCenter	ブール値	false	trueの場合、テキストを中央に配置します。hideOrdinalがtrueの場合、円形デバイスに適用されます。その他のビューポート、またはhideOrdinalがfalseの場合は無視されます。	サポートされません	1.4.0
theme	文字列	dark	色のテーマをダークまたはライトに設定します。選択されたテーマによってコンポーネントの色が制御されます。	中	1.1.0
touchForward	ブール値	false	trueの場合、ユーザーが画面にタッチできるほど近くにいる（視聴距離が1m程度）と想定して、リスト項目を小さいフォントサイズでフォーマットします。falseの場合、ユーザーが画面をタッチできるほど近くにはいない（音声で操作する）と想定し、大きいフォントサイズを使用します。	中	1.2.0
type	文字列	—	常にAlexaTextListItemに設定します。	中	1.1.0

リスト項目のテキストの折り返し（maxLines）

AlexaTextListItemコンポーネントは、ビューポートプロファイル、画像比率、項目のコンテンツに基づいて、primaryTextプロパティとsecondaryTextプロパティに表示する行数を決定します。たとえば、大きいビューポートプロファイルではprimaryTextに最大4行表示される場合がありますが、ウィジェットビューポートでは3行のテキストが表示されます。

この設定は変更できません。

AlexaTextListItemの例

以下は、primaryText、secondaryText、tertiaryTextが設定されたAlexaTextListItemの例です。

---

以下は、サムネイル画像と評価が設定されたAlexaTextListItemの例です。secondaryTextとtertiaryTextの両方が下部に表示されることに注意してください。この例では、primaryActionが設定されていないため、リスト項目はdisabledとして表示されます。

---

以下は、primaryTextとsecondaryTextが設定された、ウィジェットのAlexaTextListItemの例です。

---

AlexaTextListItemをリストで使用する例については、AlexaTextListを参照してください。

関連トピック

• APL向けAlexaデザインシステム
• レスポンシブ対応コンポーネントとテンプレート
• AlexaTextList
• AlexaLists

---

---

最終更新日: 2025 年 11 月 25 日