背景

  • →はじめに
  • 自分はかつてはページのタイトルの文字列のみがページヘッダの要素だと思っていたが、調べるとそれだけでなさそう
    • パンくずやアクションやフィルタ、ソート機能の要素もページヘッダとすることが多い

目的

  • ページヘッダのコンポーネント開発方針を決める

デザインシステムの比較

Primer

  • Components→Page header→Anatomy
  • 下記4つのエリアからなる
    • Context bar
      • パンくずや親ページへのリンクなど
      • 狭い画面サイズでないと表示しないと書いてあるが、その理由は分からなかった
        • Githubを見る限り、PCサイズでもContext barは表示されているように思えた
    • Title bar
      • ページタイトルやバックボタンなど
    • Description
      • 説明文
    • Navigation
      • タブなど

Atlassian

自分のページヘッダ方針

  • Primerに合わせる

自分のコンポーネント開発方針

  • PegeHeaderコンポーネントを作成し、下記スロットを持たせる
    • Context bar
    • Title bar
      • スロットとしてLeading action（もどるボタンなど）、Title、Actionsを持つ
    • Description
    • Navigation

次やること

  • 一覧ページレイアウトのコンポーネントを作成する