Page Header 页面头部
@lark-ui/core

Page Header 页面头部

一个将面包屑导航与标签页组合在一起的复合组件，用于页面导航。

import { PageHeader } from "../lark/page-header/page-header";
import { Breadcrumbs, Button } from "@lark-ui/core";
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: "概览", value: "overview" },
        { label: "指标", value: "metrics" },
        { label: "部署", value: "deployments" },
        { label: "绑定", value: "bindings" },
        { label: "可观测性", value: "observability" },
        { label: "设置", value: "settings" },
      ]}
      defaultTab="overview"
      onValueChange={(v) => console.log(v)}
    >
      <Button icon={<CodeIcon />} className="h-8">
        编辑代码
      </Button>
      <Button icon={<GlobeIcon />} variant="primary" className="h-8">
        访问
      </Button>
    </PageHeader>
  );
}

安装

PageHeader 是一个区块（block）——通过命令行工具（CLI）安装、 由你拥有且可自行定制的组件。与常规组件不同，区块会被复制到你的项目中， 因此你可以完全掌控代码。

1. 初始化 Lark 配置（仅首次需要）

npx @lark-ui/core init

2. 安装区块

npx @lark-ui/core add PageHeader

3. 从本地路径导入

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

用法

import { PageHeader } from "./components/lark/page-header/page-header";
import { Breadcrumbs } from "@lark-ui/core";

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 "../lark/page-header/page-header";
import { Breadcrumbs } from "@lark-ui/core";

// Basic breadcrumbs-only demo
export function PageHeaderBasicDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">首页</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>仪表板</Breadcrumbs.Current>
        </Breadcrumbs>
      }
    />
  );
}

带图标

import { PageHeader } from "../lark/page-header/page-header";
import { Breadcrumbs } from "@lark-ui/core";
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="#">
            首页
          </Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current icon={<GearIcon size={16} />}>
            设置
          </Breadcrumbs.Current>
        </Breadcrumbs>
      }
    />
  );
}

带标签页

import { PageHeader } from "../lark/page-header/page-header";
import { Breadcrumbs } from "@lark-ui/core";

// With tabs
export function PageHeaderWithTabsDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">首页</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>设置</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      tabs={[
        { label: "常规", value: "general" },
        { label: "安全", value: "security" },
        { label: "通知", value: "notifications" },
      ]}
      defaultTab="general"
    />
  );
}

带操作

import { PageHeader } from "../lark/page-header/page-header";
import { Breadcrumbs, Button } from "@lark-ui/core";

// With actions
export function PageHeaderWithActionsDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">首页</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">项目</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>我的项目</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      tabs={[
        { label: "概览", value: "overview" },
        { label: "设置", value: "settings" },
      ]}
      defaultTab="overview"
    >
      <Button variant="primary" size="base">
        部署
      </Button>
    </PageHeader>
  );
}

带标题

页面标题

import { PageHeader } from "../lark/page-header/page-header";
import { Breadcrumbs } from "@lark-ui/core";

// With title only
export function PageHeaderWithTitleDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">首页</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">产品</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>页面标题</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      title="页面标题"
    />
  );
}

带标题和描述

页面标题

以行动为导向、强调价值的描述，说明本页面的用途。可选的第二句用于补充使用场景或前置条件。

import { PageHeader } from "../lark/page-header/page-header";
import { Breadcrumbs } from "@lark-ui/core";

// With title and description
export function PageHeaderWithTitleDescriptionDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">首页</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">产品</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>页面标题</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      title="页面标题"
      description="以行动为导向、强调价值的描述，说明本页面的用途。可选的第二句用于补充使用场景或前置条件。"
    />
  );
}

完整示例

组合面包屑导航、标题、描述、标签页和操作。

页面标题

以行动为导向、强调价值的描述，说明本页面的用途。

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

// Complete example with all features
export function PageHeaderCompleteDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">首页</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">产品</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>页面标题</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      title="页面标题"
      description="以行动为导向、强调价值的描述，说明本页面的用途。"
      tabs={[
        { label: "概览", value: "overview" },
        { label: "分析", value: "analytics" },
        { label: "设置", value: "settings" },
      ]}
      defaultTab="overview"
    >
      <Button variant="outline" size="sm">
        导出
      </Button>
      <Button variant="primary" size="sm" icon={<PlusIcon size={16} />}>
        新建项
      </Button>
    </PageHeader>
  );
}

API 参考

属性类型默认值说明
spacing"compact" | "base" | "relaxed""base"-
breadcrumbsReactNode--
titlestring--
descriptionstring--
tabsTabsItem[]--
defaultTabstring--
classNamestring--
childrenReactNode--

TabsItem 标签页项

属性类型
labelstring
valuestring