ページヘッダーPageHeaderBeta
モバイル画面の上部に、戻る、タイトル、補足、末尾操作を配置するページヘッダーです。
プレビュー
手荷物追跡
ヤマダ クロウ 様・ABC123
現在地中部国際空港 第1ターミナル
配送状態搭載待ち
状態とバリエーション
左寄せヘッダー
既定は左寄せで、戻ると末尾アクションを同じ行に配置します。
手荷物追跡
ヤマダ クロウ 様・ABC123
現在地中部国際空港 第1ターミナル
配送状態搭載待ち
中央タイトル
align="center" はモバイル予約確認のような画面で使います。
予約の確認
2名 / 7月18日
予約番号RK-718-02
先頭スロット
leading には状態バッジやロゴを置けます。戻ると同時に指定した場合も両方表示します。
公開中
公開リンク
チームページに表示中
公開範囲リンクを知っているチームメンバー
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| title | ReactNode | - | ページタイトルです。 |
| subtitle | ReactNode | - | タイトル下の補足行です。 |
| onBack | () => void | - | 戻るボタンを表示するハンドラです。44px以上のタッチ領域を持ちます。 |
| backLabel | string | "戻る" | 戻るボタンの aria-label と tooltip 文言です。 |
| leading | ReactNode | - | 戻るボタンと同じ先頭スロットに追加で置く要素です。 |
| actions | ReactNode | - | 末尾の操作です。アイコン操作は TooltipButton で説明します。 |
| sticky | boolean | true | スクロールコンテナ上部に固定します。 |
| align | "left" | "center" | "left" | タイトルを左寄せまたは中央寄せにします。 |
使い方
import * as React from "react";
import { PageHeader, Toast, TooltipButton } from "@gunjo/ui";
import { IconRefresh } from "@tabler/icons-react";
export function BaggageHeader() {
const [toastMessage, setToastMessage] = React.useState<string | null>(null);
return (
<div className="relative w-full max-w-sm overflow-hidden rounded-xl border bg-background">
{toastMessage ? (
<div className="pointer-events-none absolute right-3 top-16 z-[100] w-[min(320px,calc(100%-1.5rem))]">
<Toast
message={toastMessage}
type="success"
isVisible
placement="inline"
closeLabel="閉じる"
onClose={() => setToastMessage(null)}
className="!w-full !max-w-full sm:!w-full sm:!max-w-full"
/>
</div>
) : null}
<PageHeader
title="手荷物追跡"
subtitle="ヤマダ クロウ 様・ABC123"
backLabel="戻る"
onBack={() => setToastMessage("一覧へ戻りました。")}
actions={
<TooltipButton
type="button"
variant="ghost"
size="icon"
aria-label="更新"
tooltip="更新"
onClick={() => setToastMessage("追跡情報を更新しました。")}
>
<IconRefresh className="size-5" aria-hidden="true" />
</TooltipButton>
}
/>
<div className="space-y-3 p-4">
<div className="rounded-lg border bg-card p-3 text-sm">
<span className="text-muted-foreground">現在地</span>
<span className="mt-1 block font-medium text-foreground">中部国際空港 第1ターミナル</span>
</div>
<div className="rounded-lg border bg-card p-3 text-sm">
<span className="text-muted-foreground">配送状態</span>
<span className="mt-1 block font-medium text-foreground">搭載待ち</span>
</div>
</div>
</div>
);
}