kaze風
AppLayout
アプリレイアウト
プレビュー
使いどころ
使う場面
- サイドバー + トップバー + 本文の構成で、業務アプリやダッシュボードの画面全体を組む
- 画面ごとに 1 つだけ置き、sidebar と topbar に Sidebar / Topbar を渡す
- 本文は children に渡す。内側が <main> になるので、ページ内に別の <main> を作らない
使わない場面
- LP やマーケティングページの骨組み。Navbar、Section、LPFooter を並べる
- 本文の中で要素を並べるだけの用途。カードや項目の並びは Grid を使う
- ダイアログや入れ子の画面に AppLayout を重ねること。画面全体の枠は 1 つで足りる
使い方
<AppLayout
sidebar={<Sidebar logo={<Logo />}>...</Sidebar>}
topbar={<TopBar>ページタイトル</TopBar>}
>
<p>メインコンテンツ</p>
</AppLayout>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
sidebar | ReactNode | なし | サイドバー要素 |
topbar | ReactNode | なし | トップバー要素 |
children必須 | ReactNode | なし | メインコンテンツ |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- 本文は <main> で包まれるため、スクリーンリーダーの「メインコンテンツへ移動」で本文に飛べる
- sidebar と topbar は渡した要素のままなので、Sidebar や Topbar 側のランドマーク（<nav> など）が読み上げに使われる
- スキップリンクは用意していない。キーボード利用者のためにサイドバーの項目が多い画面では、利用側で本文へのスキップリンクを足す