デスクトップページヘッダーDesktopPageHeaderExperimental

A dense per-screen title bar for desktop consoles, with optional eyebrow, subtitle, and trailing actions.

プレビュー

状態とバリエーション

コンテキスト＋操作

営業所などの文脈と、画面固有の操作を同じ見出しにまとめます。

群青交通　東京営業所

車両管理・整備コンソール

稼働状況、車検・保険の期限、入庫予定を一元管理

タイトルのみ

補助情報や操作が無い場合も、同じ見出しのリズムを維持します。

日次運行レポート

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
titleReactNode-画面の主見出し。h1 として描画します。
eyebrowReactNode-タイトル上の任意コンテキスト（事業者・営業所・breadcrumb など）。
subtitleReactNode-タイトル下の任意説明。
actionsReactNode-画面固有の末尾操作または状態。
className / HTML attributesstring / HTMLAttributes<HTMLElement>-header 要素へ転送します。

使い方

"use client";

import * as React from "react";
import { Badge, Button, DesktopPageHeader } from "@gunjo/ui";

export function FleetHeader() {
  const [saved, setSaved] = React.useState(false);

  return (
    <DesktopPageHeader
      eyebrow="Gunjo Transit · Tokyo depot"
      title="Fleet maintenance console"
      subtitle="Track availability, deadlines, and workshop plans"
      actions={
        <>
          {saved && <Badge variant="success">Saved</Badge>}
          <Button size="sm" variant="outline" onClick={() => setSaved(true)}>
            Save updates
          </Button>
        </>
      }
    />
  );
}

使用コンポーネント

DesktopPageHeaderButtonBadge

関連コンポーネント

HeaderPageHeaderBottomActionBar