Gracias por tu visita. Esta página solo está disponible en inglés.

Header

The Alexa header responsive component (AlexaHeader) displays common header information such as a title, subtitle, and back button.

Import the alexa-layouts package

To use AlexaHeader, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.1.0. AlexaHeader was introduced in version 1.0.0.

Use the Other Versions option at the top of this page to see documentation for different versions of AlexaHeader. The table of parameters notes the version of alexa-layouts in which each parameter was added.

AlexaHeader parameters

All parameters except type are optional.

Name Type Default Description Version added

headerAttributionImage

String

None

URL for attribution image source. Only shown when headerAttributionPrimacy is true, or on a device that shows Title/Subtitle and Attribution.

1.0.0

headerAttributionPrimacy

Boolean

true

On devices that can only display one element due to screen size, Attribution is prioritized. Setting to false displays Title/Subtitle. Defaults to true.

1.0.0

headerAttributionText

String

None

Attribution text to render in the header. The headerAttributionText value is shown only when no headerAttributionImage is provided and when headerAttributionPrimacy is true, or on a device that shows both Title/Subtitle and Attribution.

1.0.0

headerBackButtonAccessibilityLabel

String

None

An accessibility label to describe the back button to customers who use a screen reader.

1.1.0

headerBackButtonCommand

Command

{"type":"SendEvent","arguments":["goBack"]}

Command to execute when the user selects the back button. Defaults to SendEvent with a 'GoBack' argument.

1.1.0

headerBackButton

Boolean

false

Toggle to display back button in header. Defaults to false.

1.0.0

headerBackgroundColor

String

transparent

Optional color value to use as the background color for the Header. Defaults to transparent.

1.0.0

headerDivider

Boolean

false

Toggle to display the divider that appears at the bottom of header to help separate it from the content below. Default to false

1.1.0

headerSubtitle

String

None

Secondary text to render in header.

1.0.0

headerTitle

String

None

Primary text to render in header.

1.0.0

theme

String

dark

Colors are switched depending on the specified theme (light/dark). Default to dark theme.

1.1.0

type

String

None

Always set to AlexaHeader

1.0.0

AlexaHeader example

{
  "type": "AlexaHeader",
  "headerBackButton": true,
  "headerBackButtonAccessibilityLabel": "back",
  "headerBackgroundColor": "red",
  "headerTitle": "Header title",
  "headerSubtitle": "Header subtitle",
  "headerAttributionText": "Attribution",
  "headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
  "headerAttributionPrimacy": true,
  "headerDivider": true
}