---
title: PageHeader 页头 (done)
order: 17
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

当 `PageHeader` 只有一行内容时，padding 为 `10px 20px`，高度为 `48px`，

### 基本使用

```jsx
import React from 'react';
import { PageHeader } from 'baas-ui';

export default () => (
  <div style={{ padding: 20, background: '#f6f6f6' }}>
    <PageHeader onBack={() => null} title="标题" />
  </div>
);
```

### 自定义 backIcon

```jsx
import React from 'react';
import { PageHeader } from 'baas-ui';

export default () => (
  <div style={{ padding: 20, background: '#f6f6f6' }}>
    <PageHeader
      onBack={() => null}
      title="标题"
      backIcon={
        <div style={{ height: 28, lineHeight: '28px', color: '#999' }}>
          返回
        </div>
      }
    />
  </div>
);
```

### 带有描述文字

```jsx
import React from 'react';
import { PageHeader, Divider } from 'baas-ui';

export default () => (
  <div style={{ padding: 20, background: '#f6f6f6' }}>
    <PageHeader
      onBack={() => null}
      title="标题"
      subTitle={
        <div>
          <Divider type="vertical" style={{ margin: '0 12px 0 0' }} />
          描述文字
        </div>
      }
    />
  </div>
);
```

### 右侧操作区

```jsx
import React from 'react';
import { PageHeader } from 'baas-ui';

export default () => (
  <div style={{ padding: 20, background: '#f6f6f6' }}>
    <PageHeader
      onBack={() => null}
      title="标题"
      extra={
        <a
          href="https://filoop.com/"
          target="_blank"
          style={{ lineHeight: '28px' }}
        >
          XXX使用说明
        </a>
      }
    />
  </div>
);
```

### 带有 Tab

```jsx
import React from 'react';
import { PageHeader, Tabs } from 'baas-ui';

const { TabPane } = Tabs;

export default () => (
  <div style={{ padding: 20, background: '#f6f6f6' }}>
    <PageHeader
      onBack={() => null}
      title="标题"
      extra={
        <a
          href="https://filoop.com/"
          target="_blank"
          style={{ lineHeight: '28px' }}
        >
          XXX使用说明
        </a>
      }
      footer={
        <Tabs defaultActiveKey="1">
          <TabPane tab="菜单名称1" key="1" />
          <TabPane tab="菜单名称2" key="2" />
          <TabPane tab="菜单名称3" key="3" />
        </Tabs>
      }
    />
  </div>
);
```

## API

| 参数       | 说明                                             | 类型                                                                                           | 默认值               | 版本 |
| ---------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------- | -------------------- | ---- |
| title      | 自定义标题文字                                   | ReactNode                                                                                      | -                    |      |
| subTitle   | 自定义的二级标题文字                             | ReactNode                                                                                      | -                    |      |
| ghost      | pageHeader 的类型，将会改变背景颜色              | boolean                                                                                        | true                 |      |
| avatar     | 标题栏旁的头像                                   | [avatar props](/components/avatar/)                                                            | -                    |      |
| backIcon   | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode \| boolean                                                                           | `<ArrowLeftIcon />`  |      |
| tags       | title 旁的 tag 列表                              | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | -                    |      |
| extra      | 操作区，位于 title 行的行尾                      | ReactNode                                                                                      | -                    |      |
| breadcrumb | 面包屑的配置                                     | [breadcrumb](https://ant.design/components/breadcrumb-cn/)                                     | -                    |      |
| footer     | PageHeader 的页脚，一般用于渲染 TabBar           | ReactNode                                                                                      | -                    |      |
| onBack     | 返回按钮的点击事件                               | `()=>void`                                                                                     | `()=>history.back()` |      |