PageHeader
対象と作業を、大きな見出しで伝えます。
使いどころ
- 画面の最上部で、その画面の対象と作業を大きな見出しで示す時に使います。
- 作業面の中のまとまりの見出しは
Section、人やグループの画面の見出しはProfileHeaderを使います。 align="center"は作業面の主題を示す時だけに使います。本文や入力欄は中央に揃えません。
使い方
titleを見出し、descriptionをその下の補足として出します。iconは見出しの前の大きなアイコンで、淡い灰色の面に3pxの白い縁と四方への浅い影を付けた48pxの四角（角丸2px）に灰色で収めます。actionsは見出しの後に並ぶ操作です。見出しは18px（--rx-title）の黒い太字で、補足は12pxの茶色の文字です。
既定は先頭側に揃え、見出しの下に24px空けて1px #dedede の罫線を引いて、そこからシートの中身が始まることを示します。align="center"では下の罫線を引かず、アイコン・見出し・補足・操作を中央に積みます。Basecamp 2のCatch upの見出しと同じく、見出しの左右に線は伸ばしません。
見出しの文字は、シートの見出しの大きさ（18px）を上限に、PageHeader自身の幅が狭いほど小さくします。まとまりの見出しの大きさ（15px）より小さくはしません。幅が30rem未満ではactionsを見出しの下の行へ回します。
アクセシビリティ
- ルートは
headerで、見出しと補足をhgroupにまとめます。 - 見出しは常に
h1です。一つの画面にPageHeaderは一つだけ置きます。
API
PageHeader
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
title必須 | string | 画面の見出し。h1で出すので、一つの画面に一つだけ置く。 | |
description | string | 見出しの下の補足の一文。 | |
icon | Child | 見出しの先頭側に置く大きなアイコン（Iconなど）。淡い灰色の面に白い縁と浅い影を付けた48pxの四角に収める。 | |
actions | Child | 見出しの末尾側に並べる操作。狭い場所では見出しの下の行へ回す。 | |
align | "center" | "start" | "start" | startは先頭側に揃える。centerは見出しを中央に置き、作業面の主題として示す（左右に線は伸ばさない）。 |
ほかに、<header>へ標準のHTML属性を渡せます。
読み込むCSS：layers.css、reset.css、tokens.css、base.css、layout.css、components/page-header.css
コード
HTML
HTML
<div class="rx-stack">
<header class="rx-page-header" data-align="start">
<hgroup class="heading">
<h1>設定を確認する</h1>
<p>入力軸に揃えるバリエーションです。</p>
</hgroup>
</header>
<header class="rx-page-header" data-align="center">
<hgroup class="heading">
<h1>受信トレイ</h1>
<p>作業面の主題は、太字の黒い見出しを中央に置いて示します。</p>
</hgroup>
</header>
</div>
Hono JSX
Hono JSX
import { PageHeader } from "@tknf/retrix/hono";
export default () => (
<div class="rx-stack">
<PageHeader
title="設定を確認する"
description="入力軸に揃えるバリエーションです。"
align="start"
/>
<PageHeader
title="受信トレイ"
description="作業面の主題は、太字の黒い見出しを中央に置いて示します。"
align="center"
/>
</div>
);