Text Wrapping (Widget)

Note: Learn how to improve your skills with APL with Build visually rich experiences using APL at the Alexa Learning Lab.

The Alexa text wrapping responsive template (AlexaTextWrapping) is a widget-specific template that displays multiple lines of text with a header, background, and footer action button. You can display primary, secondary, and tertiary text.

You can configure the footer action button as a tap target. To make the entire AlexaTextWrapping a tap target, use the Press State component.

Compatibility

AlexaTextWrapping is designed to work with the following widget viewport profiles in the alexa-viewport-profiles package:

Widget Medium (@hubWidgetMedium)

If you use AlexaTextWrapping on an unsupported viewport, you might have unexpected results. For details about viewport profiles, see Viewport Profiles.

Import the alexa-layouts package

To use AlexaTextWrapping, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.7.0. AlexaTextWrapping was introduced in version 1.5.0.

AlexaTextWrapping parameters

The following table shows the AlexaTextWrapping properties that work with the widget viewport profiles. Not all parameters apply to all viewport profiles. The "Widget support" column indicates the widget viewport profiles that support each parameter. For details about viewport profiles, see Viewport Profiles.

All parameters except type are optional.

Name	Type	Default	Description	Widget support	Version added
`accessibilityLabel`	String	—	A string describing the footer action button. Voice over reads this string when the user selects the button. Applies when `buttonText` contains a value.	Medium	1.5.0
`backgroundAlign`	String	`center`	Image alignment to apply to the background image.	Medium	1.5.0
`backgroundBlur`	Boolean	`false`	When `true`, display the provided background image with a blur effect. Applies when `backgroundImageSource` contains a value.	Medium	1.5.0
`backgroundColor`	Color	—	Color to use as a background color. Used when `backgroundImageSource` doesn't contain a value.	Medium	1.5.0
`backgroundColorOverlay`	Boolean	`false`	When `true`, apply a scrim to the background to make it easier to read the text displayed over the image.	Medium	1.5.0
`backgroundImageSource`	String	—	URL for the background image source.	Medium	1.5.0
`backgroundOverlayGradient`	Boolean	`false`	When `true`, apply a gradient to the background.	Medium	1.5.0
`backgroundScale`	String	`best-fill`	Image scaling to apply to background image.	Medium	1.5.0
`buttonStyle`	String	`contained`	The style to use for the footer action button. Applies when `buttonText` contains a value. Set to `contained` or `ingress`. For details about which styles to use, see Button appearance. The `theme` determines the button colors.	Medium	1.5.0
`buttonText`	String	—	When provided, include a footer action button with the specified text. This text should indicate the purpose of the button. When not set, `AlexaTextWrapping` doesn't include the footer action button.	Medium	1.5.0
`entities`	Array	—	Array of entity data to bind to this template.	Medium	1.5.0
`headerBackgroundColor`	Color	`transparent`	Optional color value to use as background color for the header.	Medium	1.5.0
`headerTitle`	String	—	Primary text to render in the header.	Medium	1.5.0
`headerTitleCanUseTwoLines`	Boolean	`false`	When `true`, long `headerTitle` text in a widget can wrap to two lines when needed. Applies to widget viewport profiles only. Ignored when displayed on a standard APL viewport.	Medium	1.5.0
`lang`	String	`${environment.lang}`	The language for the text displayed in the template. This language determines the default font used for the text. For example, when set to `ar-SA`, the component uses Arabic fonts when available on the device. Set to a BCP-47 string. For more details about language-specific fonts for responsive components, see Language-specific fonts in the components and templates.	Medium	1.5.0
`layoutDirection`	String	`${environment.layoutDirection}`	Specifies the layout direction for the content. Set this property to either `LTR` (left-to-right) or `RTL` (right-to-left). This property doesn't inherit the `layoutDirection` from the component's parent container. Therefore, explicitly set this property when needed. For more details about support for right-to-left languages in the responsive components, see Support for Right-to-left Languages.	Medium	1.5.0
`primaryAction`	Array of commands	—	The action to trigger when the user selects the footer action button. Applies when `buttonText` contains a value.	Medium	1.5.0
`primaryText`	String	—	Primary text to display.	Medium	1.5.0
`secondaryText`	String	—	Secondary text to display.	Medium	1.5.0
`tertiaryText`	String	—	Tertiary text to display.	Medium	1.5.0
`theme`	String	`dark`	Set the dark or light color theme. The selected theme controls the colors used for the component.	Medium	1.5.0
`touchForward`	Boolean	`false`	When `true`, use the 'touch-forward' text style for the footer action button text. This style displays the button text without italics. When `false`, use the default text style. For details about styling the button, see Button appearance.	Medium	1.5.0

AlexaTextWrapping example

The following example shows the AlexaTextWrapping template configured with the footer action button.

The following example uses AlexaTextWrapping and AlexaPressState together to make the entire widget a tap target. Users can also tap the footer action button.

Was this page helpful?

Provide feedback

Last updated: Dec 06, 2023