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 are built to 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
- Import the alexa-layouts package
- Available responsive components and templates
- Related topics
About the responsive components and templates
In APL, a component is a primitive UI element that can be displayed on the screen. The available components are defined by APL. For example, the Text
component displays a block of text. When you use a component, you need to 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 ensure it works correctly 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:
|
To create a button from scratch with components:
|
To create a full-screen scrolling list with a responsive template:
|
To create a full-screen scrolling list from scratch with components:
|
Import the alexa-layouts package
To use the responsive components and templates, add the alexa-layouts
package to your document's package import
array. The latest version of the alexa-layouts
package is 1.1.0
.
Example of the imports
section of a document:
{
"import": [
{
"name": "alexa-layouts",
"version": "1.1.0"
}
]
}
Importing alexa-layouts
automatically imports alexa-styles
and alexa-viewport-profiles
as well. You do not need to import those packages separately.
Available responsive components and templates
See the links below for details about each available component or template.
Responsive components:
- Background
- Button
- Divider
- Footer
- Header
- Image
- Ordinal
- Page Counter
- Text List Item
- Transport Controls
Responsive templates: