kaze風
TopBar
トップバー
プレビュー
使いどころ
使う場面
- ページの上部に、画面のタイトルや検索、ユーザーメニューなどを置く
- children に左側の内容、actions に右側の操作を渡す
- Sidebar と組み合わせて、アプリのシェルを作る
使わない場面
- LP やプロダクトサイトのヘッダー。Navbar を使う
- 主要な移動先の一覧。Sidebar を使う
- 操作を 4 つ以上並べること。重要なものだけ出し、残りは Dropdown にまとめる
使い方
<TopBar actions={<Button>新規作成</Button>}>
<h2>ダッシュボード</h2>
</TopBar>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
children | ReactNode | なし | トップバーの主要コンテンツ（タイトルなど） |
actions | ReactNode | なし | 右側に表示するアクション要素 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- <header> 要素としてレンダリングされる。ページ全体のヘッダーとして 1 つだけ使う
- actions のアイコンボタンには aria-label を付ける
- TopBar 自体にキーボード操作はない。中に置いた部品の操作に従う