Text Wrapping（ウィジェット）

Alexa Text Wrappingレスポンシブ対応テンプレート（AlexaTextWrapping）は、複数行のテキストにヘッダー、背景、フッターアクションボタンを付けて表示する、ウィジェット固有のテンプレートです。第1、第2、第3のテキストを表示できます。

フッターアクションボタンをタップターゲットとして設定できます。AlexaTextWrapping全体をタップターゲットにするには、Press Stateコンポーネントを使用してください。

互換性

AlexaTextWrappingは、alexa-viewport-profilesパッケージの次のウィジェットビューポートプロファイルで動作するように設計されています。

• ウィジェット、中（@hubWidgetMedium）

サポートされていないビューポートでAlexaTextWrappingを使用すると、予期しない結果になることがあります。ビューポートプロファイルの詳細については、ビューポートプロファイルを参照してください。

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

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

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

AlexaTextWrappingのパラメーター

次の表は、ウィジェットビューポートプロファイルで機能するAlexaTextWrappingのプロパティの一覧です。すべてのパラメーターがすべてのビューポートプロファイルに適用されるわけではありません。「ウィジェットのサポート」列は、各パラメーターをサポートするウィジェットビューポートプロファイルを示しています。ビューポートプロファイルの詳細については、ビューポートプロファイルを参照してください。

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

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
accessibilityLabel	文字列	—	フッターアクションボタンを説明する文字列です。ユーザーがボタンを選択すると、ボイスオーバーでこの文字列が読み上げられます。buttonTextに値が指定されている場合に適用されます。	中	1.5.0
backgroundAlign	文字列	center	背景画像の配置を指定します。	中	1.5.0
backgroundBlur	ブール値	false	trueの場合、指定された背景画像にぼかしを入れて表示します。backgroundImageSourceに値が指定された場合にのみ適用されます。	中	1.5.0
backgroundColor	色	—	背景色として使用する色です。backgroundImageSourceに値が指定されていない場合に使用されます。	中	1.5.0
backgroundColorOverlay	ブール値	false	trueの場合、背景にスクリム（オーバーレイ）を適用して、画像の上に重ねて表示されたテキストを読みやすくします。	中	1.5.0
backgroundImageSource	文字列	—	背景の画像ソースのURLです。	中	1.5.0
backgroundOverlayGradient	ブール値	false	trueの場合、背景にグラデーションを適用します。	中	1.5.0
backgroundScale	文字列	best-fill	背景画像のサイズを調整する方法を指定します。	中	1.5.0
buttonStyle	文字列	contained	フッターアクションボタンのスタイルです。buttonTextに値が指定されている場合に適用されます。containedまたはingressに設定します。どのスタイルを使用すればよいかの詳細については、ボタンの外観を参照してください。ボタンの色はthemeによって決まります。	中	1.5.0
buttonText	文字列	—	設定した場合、指定したテキストを含むフッターアクションボタンが表示されます。このテキストはボタンの目的を示している必要があります。設定しない場合、AlexaTextWrappingにフッターアクションボタンは追加されません。	中	1.5.0
entities	配列	—	このテンプレートにバインドするentityデータの配列です。	中	1.5.0
headerBackgroundColor	色	transparent	（オプション）ヘッダーの背景色として使用する色の値です。	中	1.5.0
headerTitle	文字列	—	ヘッダーに表示する第1テキストです。	中	1.5.0
headerTitleCanUseTwoLines	ブール値	false	trueの場合、ウィジェット内の長いheaderTitleテキストを必要に応じて2行に折り返します。ウィジェットビューポートプロファイルにのみ適用されます。標準のAPLビューポートに表示されている場合は無視されます。	中	1.5.0
lang	文字列	${environment.lang}	テンプレートに表示されるテキストの言語です。この言語によって、テキストに使用されるデフォルトのフォントが決まります。たとえば、ar-SAに設定すると、コンポーネントはデバイスでアラビア語フォントが利用可能であれば使用します。この値はBCP-47文字列に設定します。 レスポンシブ対応コンポーネントの言語固有のフォントの詳細については、コンポーネントとテンプレートでの言語固有のフォントを参照してください。	中	1.5.0
layoutDirection	文字列	${environment.layoutDirection}	コンテンツのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。 レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。	中	1.5.0
primaryAction	コマンドの配列	—	ユーザーがフッターアクションボタンを選択したときにトリガーするアクションです。buttonTextに値が指定されている場合に適用されます。	中	1.5.0
primaryText	文字列	—	表示する第1テキストです。	中	1.5.0
secondaryText	文字列	—	表示する第2テキストです。	中	1.5.0
tertiaryText	文字列	—	表示する第3テキストです。	中	1.5.0
theme	文字列	dark	色のテーマをダークまたはライトに設定します。選択されたテーマによってコンポーネントの色が制御されます。	中	1.5.0
touchForward	ブール値	false	trueの場合、フッターアクションボタンのテキストに「タッチ前提」テキストスタイルが適用されます。このスタイルは、ボタンテキストを斜体にせずに表示します。falseの場合、デフォルトのテキストスタイルを使用します。ボタンのスタイル設定の詳細については、ボタンの外観を参照してください。	中	1.5.0
type	文字列	—	常にAlexaTextWrappingに設定します。	中	1.5.0

AlexaTextWrappingの例

以下は、AlexaTextWrappingテンプレートにフッターアクションボタンを設定した例です。

---

以下の例では、AlexaTextWrappingをAlexaPressStateと一緒に使用して、ウィジェット全体をタップターゲットにします。ユーザーはフッターアクションボタンをタップすることもできます。

---

関連トピック

• レスポンシブ対応コンポーネントとテンプレート
• Header
• Footer Action Button
• Press State

---

---

最終更新日: 2025 年 12 月 23 日