import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs, Button } from "@cloudflare/kumo";
import { HouseIcon, CodeIcon, GlobeIcon } from "@phosphor-icons/react";

// Full-featured hero demo matching original
export function PageHeaderHeroDemo() {
  return (
    <PageHeader
      className="w-full"
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href="#">
            Workers & Pages
          </Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>cloudflare-dev-platform</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      tabs={[
        { label: "Overview", value: "overview" },
        { label: "Metrics", value: "metrics" },
        { label: "Deployments", value: "deployments" },
        { label: "Bindings", value: "bindings" },
        { label: "Observability", value: "observability" },
        { label: "Settings", value: "settings" },
      ]}
      defaultTab="overview"
      onValueChange={(v) => console.log(v)}
    >
      <Button icon={<CodeIcon />} className="h-8">
        Edit code
      </Button>
      <Button icon={<GlobeIcon />} variant="primary" className="h-8">
        Visit
      </Button>
    </PageHeader>
  );
}

安装

PageHeader 是一个 block —— 通过 CLI 安装、归你所有且可自定义的组件。与普通组件不同，block 会复制到你的项目中，因此你可以完全掌控代码。

1. 初始化 Kumo 配置（仅首次）

npx @cloudflare/kumo init

2. 安装 block

npx @cloudflare/kumo add PageHeader

3. 从本地路径导入

// The path depends on your kumo.json blocksDir setting
// Default: src/components/kumo/
import { PageHeader } from "./components/kumo/page-header/page-header";

用法

import { PageHeader } from "./components/kumo/page-header/page-header";
import { Breadcrumbs } from "@cloudflare/kumo";

export default function Example() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">Projects</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>My Project</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      tabs={[
        { label: "Overview", value: "overview" },
        { label: "Settings", value: "settings" },
      ]}
      defaultTab="overview"
      onValueChange={(value) => {
        console.log(value);
      }}
    />
  );
}

示例

基础

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs } from "@cloudflare/kumo";

// Basic breadcrumbs-only demo
export function PageHeaderBasicDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>
        </Breadcrumbs>
      }
    />
  );
}

带图标

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs } from "@cloudflare/kumo";
import { HouseIcon, GearIcon } from "@phosphor-icons/react";

// With icons in breadcrumbs
export function PageHeaderWithIconsDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href="#">
            Home
          </Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current icon={<GearIcon size={16} />}>
            Settings
          </Breadcrumbs.Current>
        </Breadcrumbs>
      }
    />
  );
}

带标签页

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs } from "@cloudflare/kumo";

// With tabs
export function PageHeaderWithTabsDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>Settings</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      tabs={[
        { label: "General", value: "general" },
        { label: "Security", value: "security" },
        { label: "Notifications", value: "notifications" },
      ]}
      defaultTab="general"
    />
  );
}

带操作

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs, Button } from "@cloudflare/kumo";

// With actions
export function PageHeaderWithActionsDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">Projects</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>My Project</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      tabs={[
        { label: "Overview", value: "overview" },
        { label: "Settings", value: "settings" },
      ]}
      defaultTab="overview"
    >
      <Button variant="primary" size="base">
        Deploy
      </Button>
    </PageHeader>
  );
}

带标题

Page title

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs } from "@cloudflare/kumo";

// With title only
export function PageHeaderWithTitleDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      title="Page title"
    />
  );
}

带标题和描述

Page title

Action-led, value-oriented description of what this page does. Optional second sentence with use cases or prerequisites.

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs } from "@cloudflare/kumo";

// With title and description
export function PageHeaderWithTitleDescriptionDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      title="Page title"
      description="Action-led, value-oriented description of what this page does. Optional second sentence with use cases or prerequisites."
    />
  );
}

完整示例

组合了面包屑、标题、描述、标签页与操作。

Page title

Action-led, value-oriented description of what this page does.

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs, Button } from "@cloudflare/kumo";
import { PlusIcon } from "@phosphor-icons/react";

// Complete example with all features
export function PageHeaderCompleteDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      title="Page title"
      description="Action-led, value-oriented description of what this page does."
      tabs={[
        { label: "Overview", value: "overview" },
        { label: "Analytics", value: "analytics" },
        { label: "Settings", value: "settings" },
      ]}
      defaultTab="overview"
    >
      <Button variant="outline" size="sm">
        Export
      </Button>
      <Button variant="primary" size="sm" icon={<PlusIcon size={16} />}>
        New Item
      </Button>
    </PageHeader>
  );
}

API 参考

Prop	Type	Default	Description
spacing	`"compact" \| "base" \| "relaxed"`	`"base"`	-
breadcrumbs	`ReactNode`	-	-
title	`string`	-	-
description	`string`	-	-
tabs	`TabsItem[]`	-	-
defaultTab	`string`	-	-
className	`string`	-	-
children	`ReactNode`	-	-

TabsItem

属性	类型
label	string
value	string

Kumo

Kumo

Page Header

Page title

Page title

Page title