PageHeader

page-header

页头骨架 · 返回/面包屑/标题/标签/操作区/Tabs 页脚(dogfood 复用·零依赖·可 RSC)

用法

极简（仅标题 + 操作）

最常见的列表页头：左侧标题，右侧主操作按钮。

用户管理

tsx

<PageHeader
  title="用户管理"
  extra={<Button variant="solid" size="sm">新建用户</Button>}
/>

面包屑 + 副标题 + 标签

breadcrumb 渲染在标题上方，subTitle 与 tags 贴在标题右侧。

商品列表

管理在售与下架商品

128 在售

tsx

<PageHeader
  breadcrumb={<Breadcrumb items={[{ label: "首页", href: "/" }, { label: "商品列表" }]} />}
  title="商品列表"
  subTitle="管理在售与下架商品"
  tags={<Chip tone="brand" variant="soft" size="sm">128 在售</Chip>}
/>

详情页（返回 + Tabs 页脚 + 分隔线）

传入 onBack 渲染返回箭头；footer 常放 Tabs；bordered 在底部加分隔线。

订单 #20260603-8821

共 6 件商品

进行中已付款

tsx

<PageHeader
  onBack={() => router.back()}
  breadcrumb={<Breadcrumb items={items} />}
  title="订单 #20260603-8821"
  subTitle="共 6 件商品"
  tags={<Chip tone="brand" variant="soft" size="sm">进行中</Chip>}
  extra={<><Button variant="ghost" size="sm">导出</Button><Button variant="solid" size="sm">编辑</Button></>}
  footer={
    <Tabs defaultValue="detail">
      <TabsList>
        <TabsTab value="detail">详情</TabsTab>
        <TabsTab value="items">商品</TabsTab>
        <TabsTab value="logistics">物流</TabsTab>
      </TabsList>
    </Tabs>
  }
  bordered
/>

何时用

详情页 / 管理页顶部的页头骨架：统一安放返回箭头、面包屑、主标题、状态标签、右侧操作区和底部 Tabs。各槽位直接 dogfood 传入瑚琏 Breadcrumb / Chip / Tabs；只需要面包屑导航本身用 Breadcrumb，PageHeader 是把整块页头排版好。不传 onBack 时可保持 RSC（无回调）。

导入

import { PageHeader } from "@hulianui/ui"

Props

名称	类型	默认	说明
backLabel	`string`	`"返回"`	返回按钮的无障碍标签。
bordered	`boolean`	`false`	是否在页头底部渲染分隔线（复用 `<Separator/>`）。

另继承 HTMLAttributes<HTMLElement>（除 title，因其类型被改为 ReactNode）。

Events

事件	类型	说明
onBack	`() => void`	提供则在标题左侧渲染返回箭头按钮，点击触发该回调（带回调 → 消费侧为 client）。

Slots

插槽	类型	说明
title*	`ReactNode`	主标题。
subTitle	`ReactNode`	副标题，内联于标题右侧，中性弱化色。
breadcrumb	`ReactNode`	面包屑区（标题行上方），传入瑚琏 `<Breadcrumb/>`。
tags	`ReactNode`	状态标签区（贴标题右侧），传入 `<Chip/>`/`<Badge/>` 等。
extra	`ReactNode`	右侧操作区（按钮组等），窄屏自动换行到标题下方。
footer	`ReactNode`	底部附加区，常放 `<Tabs/>`。

禁忌 / 坑

title 为 ReactNode，与 HTMLAttributes.title?: string 冲突，类型已 Omit<"title">——别再往 DOM 透传字符串 title。
传 onBack 即引入回调，该消费组件必须是 client；纯展示页头不传 onBack 可保持 server 组件。

Playground

返回按钮底部分隔线

订单 #20260603-8821

共 6 件商品

进行中已付款

<PageHeader
  onBack={() => router.back()}
  breadcrumb={<Breadcrumb items={items} />}
  title="订单 #20260603-8821"
  subTitle="共 6 件商品"
  tags={<Chip tone="brand" variant="soft">进行中</Chip>}
  extra={<Button>编辑</Button>}
  footer={<Tabs>…</Tabs>}
  bordered
/>

用法

极简（仅标题 + 操作）

最常见的列表页头：左侧标题，右侧主操作按钮。

用户管理

tsx

<PageHeader
  title="用户管理"
  extra={<Button variant="solid" size="sm">新建用户</Button>}
/>

面包屑 + 副标题 + 标签

breadcrumb 渲染在标题上方，subTitle 与 tags 贴在标题右侧。

商品列表

管理在售与下架商品

128 在售

tsx

<PageHeader
  breadcrumb={<Breadcrumb items={[{ label: "首页", href: "/" }, { label: "商品列表" }]} />}
  title="商品列表"
  subTitle="管理在售与下架商品"
  tags={<Chip tone="brand" variant="soft" size="sm">128 在售</Chip>}
/>

详情页（返回 + Tabs 页脚 + 分隔线）

传入 onBack 渲染返回箭头；footer 常放 Tabs；bordered 在底部加分隔线。

订单 #20260603-8821

共 6 件商品

进行中已付款

tsx

<PageHeader
  onBack={() => router.back()}
  breadcrumb={<Breadcrumb items={items} />}
  title="订单 #20260603-8821"
  subTitle="共 6 件商品"
  tags={<Chip tone="brand" variant="soft" size="sm">进行中</Chip>}
  extra={<><Button variant="ghost" size="sm">导出</Button><Button variant="solid" size="sm">编辑</Button></>}
  footer={
    <Tabs defaultValue="detail">
      <TabsList>
        <TabsTab value="detail">详情</TabsTab>
        <TabsTab value="items">商品</TabsTab>
        <TabsTab value="logistics">物流</TabsTab>
      </TabsList>
    </Tabs>
  }
  bordered
/>

何时用

名称

类型

默认

说明

backLabel

string

"返回"

返回按钮的无障碍标签。

bordered

boolean

false

是否在页头底部渲染分隔线（复用 <Separator/>）。

事件

类型

说明

onBack

() => void

提供则在标题左侧渲染返回箭头按钮，点击触发该回调（带回调 → 消费侧为 client）。

Slots

插槽	类型	说明
title*	`ReactNode`	主标题。
subTitle	`ReactNode`	副标题，内联于标题右侧，中性弱化色。
breadcrumb	`ReactNode`	面包屑区（标题行上方），传入瑚琏 `<Breadcrumb/>`。
tags	`ReactNode`	状态标签区（贴标题右侧），传入 `<Chip/>`/`<Badge/>` 等。
extra	`ReactNode`	右侧操作区（按钮组等），窄屏自动换行到标题下方。
footer	`ReactNode`	底部附加区，常放 `<Tabs/>`。

Playground

返回按钮底部分隔线

订单 #20260603-8821

共 6 件商品

进行中已付款

<PageHeader
  onBack={() => router.back()}
  breadcrumb={<Breadcrumb items={items} />}
  title="订单 #20260603-8821"
  subTitle="共 6 件商品"
  tags={<Chip tone="brand" variant="soft">进行中</Chip>}
  extra={<Button>编辑</Button>}
  footer={<Tabs>…</Tabs>}
  bordered
/>

PageHeader

用法

极简（仅标题 + 操作）

用户管理

面包屑 + 副标题 + 标签

商品列表

详情页（返回 + Tabs 页脚 + 分隔线）

订单 #20260603-8821

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关

Playground

订单 #20260603-8821

PageHeader

用法

极简（仅标题 + 操作）

用户管理

面包屑 + 副标题 + 标签

商品列表

详情页（返回 + Tabs 页脚 + 分隔线）

订单 #20260603-8821

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关

Playground

订单 #20260603-8821