Responsive Components and Templates

The Alexa Design System for APL provides a set of responsive components and templates you can use in your APL document. These layouts automatically work on viewports with different modes, sizes, and shapes. Use the responsive components and templates instead of building your own layouts to create responsive APL documents with less effort.

About the responsive components and templates

In APL, a component is a primitive UI element that displays on the screen. APL defines the set of primitive components. For example, the Text component displays a block of text. When you use a component, you must build in responsiveness to different viewports yourself. For instance, for a Text component, you might create a conditional statement to vary the font size or color based on viewport characteristics.

A responsive component combines components into modular, responsive elements. You can use these as building blocks in your document, similar to how you would use components. For example, Button displays a button that works on all different types of devices and handles different button states automatically.

A responsive template is a complete viewport design that combines components and responsive components. The template fills the entire viewport and includes the background, header, and content. For example, the Text List template presents a scrolling list of text items with a background and header.

Use the responsive components and templates to simplify building your APL document and make sure it works on different viewports. This is usually much simpler than building your own layouts from scratch, as illustrated here:

To create a button with a responsive component:

  1. Add AlexaButton to your document.
  2. Set the AlexaButton properties for the button text and actions to take when the user selects the button.

To create a button from scratch with components:

  1. Combine the components into a custom layout:
    • Frame
    • Text
    • TouchWrapper
  2. Set the relevant properties on each of the components.
  3. Define conditions on the components and styles to handle:
    • Different viewport sizes and shapes
    • Changing the button appearance for different buttons states (pressed, not pressed, disabled, etc.)

To create a full-screen scrolling list with a responsive template:

  1. Add AlexaTextList to your document.
  2. Set the AlexaTextList properties for the background image/color, the header text, the action to take when a user selects an item, and an array of items to display.

To create a full-screen scrolling list from scratch with components:

  1. Combine the components into a custom layout:
    • Text components to display the title at the top
    • Image component to display an icon at the top on small viewports
    • Image or Frame to create a background
    • Sequence to create a scrollable list
    • Text to show the number of each item
    • Text to show the text of each item
    • TouchWrapper to make the list items selectable
  2. Set the relevant properties on each of the components.
  3. Define conditions on the components and styles to handle different viewport sizes and shapes.

Import the alexa-layouts package

To use the responsive components and templates, add the alexa-layouts package to the import array in your document. The latest version of the alexa-layouts package is 1.2.0.

Example of the imports section of a document:

{
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.2.0"
    }
  ]
}

Importing alexa-layouts automatically imports alexa-styles and alexa-viewport-profiles as well. You don't need to import those packages separately.

Available responsive components and templates

See the following links for details about each available component or template.

Responsive components:

Responsive templates:

Amazon Alexa
Amazon Appstore
Amazon Web Services
Amazon Dash Replenishment