# 页头 PageHeader

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/page-header
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。包括由面包屑、标题等内容

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基本用法**：基础页头，适合使用在需要简单描述的场景。默认是没有底色的。
- **带有面包屑**：基础页头，适合使用在需要简单描述的场景。默认是没有底色的。
- **底色透明**：默认是没有底色的，如果有需要可以通过`style`或类名设置不同底色。
- **组合示例**：组件提供的完整能力

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### PageHeader

|参数名|描述|类型|默认值|
|---|---|---|---|
|extra|展示额外内容|ReactNode |`-`|
|footer|底部内容|ReactNode |`-`|
|subTitle|次级标题|ReactNode |`-`|
|title|主标题|ReactNode |`-`|
|backIcon|返回图标，设置为 `false` 时会隐藏图标|ReactNode \| boolean |`-`|
|breadcrumb|面包屑，接受面包屑的所有属性, [BreadcrumbProps](/react/components/breadcrumb)|[BreadcrumbProps](breadcrumb#breadcrumb) |`-`|
|className|节点类名|string \| string[] |`-`|
|style|节点样式|CSSProperties |`-`|
|onBack|点击返回图标的回调|(e: MouseEvent) => void |`-`|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt