Dictionary

役割と種類

Headerはメジャースタック系コンポーネント（Dialog、Navigation Drawer、Sheet）の画面のタイトルを表示し、タスクの目的を明確にします。

また、「検索」、「絞り込み」、「シェア」などのタスクの完了には必ずしも必要ではないサブアクションを行えるようにします。

さらに、逆方向の遷移を行うことができます。しかし、メジャースタック系コンポーネント（Dialog、Navigation Drawer、Sheet）の横方向の遷移はありえないため、横方向の遷移は行えません。

App BarはLeading、Body、Trailingの3つの領域で構成されます。これらの領域を配置する順番はデフォルトでは左から右ですが、右から左への言語の場合は反転する必要があります。

Leading

逆方向の画面遷移を誘導する「戻る」「閉じる」「キャンセル」Buttonを配置できます。各ナビゲーションに応じてButtonは以下のものを選択します。ButtonのAppearanceは画面内の優先順位を考慮してTransparentを選択します。

画面遷移を誘導するButtonの種類

ナビゲーション	Button
戻る	Arrow BackのアイコンのみのButton
閉じる	CrossのアイコンのみのButton
キャンセル	CrossのアイコンのみのButtonまたは「キャンセル」というテキストが入ったButton

Body

現在の画面のタスクの目的を明確にするタイトルを配置できます。

タイトルはなるべく簡潔にして文字がはみ出さないようにします。入れられるのは一般名詞のみです。商品名などの固有名詞は変動する情報のため入れることができません。

Trailing

画面内のスコープに限定した「検索」、「絞り込み」、「シェア」、「その他」などのタスクの完了に必ずしも必要ではないサブアクションを促すButtonを配置できます。「送信」や「保存」などのタスクの完了に必ず必要なアクションは利用頻度が高く、コンテンツ内のFormの入力の視線の先に配置したり、モバイルデバイスで指が届く範囲に配置するほうがアクセシブルなため、Headerに配置することはできません。

「検索」、「絞り込み」、「シェア」、「その他」などの一般的なアクションはIconのみのButtonを配置することができます。一般的ではないアクションを配置する場合は、Iconだけではアクションの内容が伝わらない可能性が高いので、テキストが入ったButtonを検討します。または、表示領域との兼ね合いを考えてデスクトップのときとモバイルのときでテキストが入ったボタンとIconのみのボタンを切り替えることも検討します。

Icon

配置するアクションが4つ以上になる場合は、Ellipsis VerticalもしくはEllipsis HorizontalのIconのみのButtonを一番最後に配置して優先順位の低いアクションを格納できます。格納したアクションはMenuを使用して表示します。

また、Trailingには検索クエリを入力して検索結果を表示できるTextfieldを配置できます。Textfieldは画面内における検索アクションの優先順位が高い場合及びデスクトップのように領域が十分ある場合はデフォルトで表示しますが、優先順位が低い場合はMagnifying GlassのIconのクリックイベントで展開します。

いつ使うべきか / 使わないべきか

アプリケーションのHeaderであるApp Bar及びModeを作るメジャースタック系コンポーネント（Dialog、Navigation Drawer、Sheet）のヘッダーに使用できます。

インタラクション

全体

スクロール

背景にヒーローイメージがある場合などはスクロールイベントに応じてAppearanceをTransparentからWhiteもしくはFilledに変化させることができます。

Leading

画面遷移

Arrow BackのアイコンのみのButtonのクリックイベントで逆方向の画面への遷移を行います。

メジャースタックのコンポーネントを閉じる

CrossのIconのみのButton、または「キャンセル」というテキストが入ったButtonのクリックイベントでメジャースタックのコンポーネントを閉じます。メジャースタックのコンポーネントについて詳しくはElevationのガイドラインを参照してください。

Elevation

Trailing

検索

Textfieldに検索クエリを入力してSubmitすることで検索を行います。検索の挙動に関して詳しくは検索のガイドラインを参照してください。

スタイル

外観

Position

スクロールした際の位置を決定します。

Fixed

上部に固定します。デフォルト値です。マイナースタック - Over 2のElevation Shadowがつきます。

Relative

スクロールに追従します。Headerに常にアクセスできる必要があまりないときに使用します。マイナースタック - Over 2のElevation Shadowがつきます。

Appearance

外観を決定します。

White

デフォルト値です。背景が白くなります。

Filled

ブランドカラーでブランドを主張したいときに使用します。

Transparent

背景にヒーローイメージなどがあって透明にしたいときに使用します。PositionがFixedの場合は、例外的にマイナースタック - Over 0のElevation Shadowがつきますが、スクロールイベントに応じてWhiteまたはFilledに変化し、通常通りマイナースタック - Over 2のElevation Shadowがつきます。

Brightness

背景の輝度を指定します。AppearanceがTransparentのときに背景の輝度に応じて文字色が変化します。

Light / Dark から選択できます。