页头 PageHeader
页头位于页容器中,页容器顶部,起到了内容概览和引导页级操作的作用。包括由面包屑、标题等内容
安装
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 | BreadcrumbProps | - |
| className | 节点类名 | string | string[] | - |
| style | 节点样式 | CSSProperties | - |
| onBack | 点击返回图标的回调 | (e: MouseEvent) => void | - |