Header



Header

Headerレスポンシブ対応コンポーネント(AlexaHeader)は、タイトル、サブタイトル、戻るボタンなどの一般的なヘッダー情報を表示します。

alexa-layoutsパッケージを読み込む

AlexaHeaderを使用するには、alexa-layoutsパッケージを読み込みます

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

このページの上部にあるその他のバージョンオプションをクリックすると、別のバージョンのAlexaHeaderドキュメントが表示されます。各パラメーターが追加されたalexa-layoutsのバージョンを、パラメーターの表に示します。

AlexaHeaderパラメーター

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

名前 デフォルト 説明 追加されたバージョン

headerAttributionImage

文字列

なし

アトリビューションの画像ソースのURLです。headerAttributionPrimacyがtrueの場合、またはタイトル/サブタイトルとアトリビューションの両方を表示するデバイスにのみ表示されます。

1.0.0

headerAttributionPrimacy

ブール値

true

画面サイズにより1つの要素しか表示できないデバイスでは、アトリビューションが優先されます。falseに設定すると、タイトルとサブタイトルが表示されます。デフォルトはtrueです。

1.0.0

headerAttributionText

文字列

なし

Headerで表示するアトリビューションのテキストです。headerAttributionTextの値は、headerAttributionImageが指定されておらず、かつ、headerAttributionPrimacytrueの場合、または、デバイスがタイトル/サブタイトルとアトリビューションの両方を表示する場合のみ表示されます。

1.0.0

headerBackButtonAccessibilityLabel

文字列

なし

スクリーンリーダーを使用するユーザーに、戻るボタンについて説明するアクセシビリティラベルです。

1.1.0

headerBackButtonCommand

コマンド

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

ユーザーが戻るボタンを選択したときに実行するコマンドです。デフォルトは、「GoBack」引数の付いたSendEventです。

1.1.0

headerBackButton

ブール値

false

戻るボタンの表示を切り替えます。デフォルトはfalseです。

1.0.0

headerBackgroundColor

文字列

transparent

Headerの背景色として使用するオプションの色の値です。デフォルトはtransparentです。

1.0.0

headerDivider

ブール値

false

切り替えてヘッダーの下部に区切り線を表示し、下のコンテンツと区別します。デフォルトはfalseです。

1.1.0

headerSubtitle

文字列

なし

Headerで表示する第2テキストです。

1.0.0

headerTitle

文字列

なし

Headerで表示する第1テキストです。

1.0.0

theme

文字列

dark

指定したテーマ(lightまたはdark)に応じて色が切り替わります。デフォルトのテーマはdarkです。

1.1.0

type

文字列

なし

常にAlexaHeaderに設定されます。

1.0.0

AlexaHeaderの例

{
  "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
}