Header



Header

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

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

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

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

AlexaHeaderパラメーター

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

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

entities

配列

[]

このコンポーネントにバインドするentityデータの配列です。

1.2.0

headerAttributionImage

文字列

なし

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

1.0.0

headerAttributionOpacity

数値

0.8

attributionテキストとattribution画像のopacityです。0と1の間の数値を設定します。

1.3.0

headerAttributionPrimacy

ブール値

true

trueの場合、画面サイズの制約のため1つの要素だけを表示するデバイスにheaderAttributionImageを表示します。falseの場合、headerTitleheaderSubtitleを表示します。

1.0.0

headerAttributionText

文字列

なし

ヘッダーで表示するアトリビューションのテキストです。headerAttributionImageに値が含まれず、かつ、headerAttributionPrimacytrueの場合、またはデバイスがタイトル/サブタイトルとアトリビューションの両方を表示する場合に表示されます。

1.0.0

headerBackButton

ブール値

false

trueの場合、戻るボタンをヘッダーに表示します。

1.0.0

headerBackButtonAccessibilityLabel

文字列

なし

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

1.1.0

headerBackButtonCommand

コマンド

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

ユーザーが戻るボタンを選択したときに実行するコマンドです。

1.1.0

headerBackgroundColor

文字列

transparent

ヘッダーの背景色として使用するオプションの色の値です。

1.0.0

headerDivider

ブール値

false

trueの場合、ヘッダーの下に区切り線を表示してコンテンツと区別できるようにします。

1.1.0

headerSubtitle

文字列

なし

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

1.0.0

headerTitle

文字列

なし

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

1.0.0

layoutDirection

文字列

${environment.layoutDirection}

コンテンツのレイアウト方向を指定します。このプロパティをLTR(左から右)、RTL(右から左)のいずれかに設定します。このプロパティは、コンポーネントの親コンテナからlayoutDirectionを継承しません。このため、必要に応じて明示的にこのプロパティを設定してください。

レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートについて詳しくは、Support for Right-to-left Languagesを参照してください。

1.4.0

theme

文字列

dark

色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。

1.1.0

type

文字列

なし

常にAlexaHeaderに設定されます。

1.0.0

AlexaHeaderの例

{
  "type": "AlexaHeader",
  "headerBackgroundColor": "red",
  "headerTitle": "これはヘッダータイトルです。",
  "headerSubtitle": "これはヘッダーのサブタイトルです",
  "headerAttributionText": "Attribution text"
}

背景を赤に指定したAlexaHeaderの例
背景を赤に指定したAlexaHeaderの例