---
order: 5
title:
  zh-CN: 复杂的例子
  en-US: Complex example
---

## zh-CN

使用操作区，并自定义子节点，适合使用在需要展示一些复杂的信息，帮助用户快速了解这个页面的信息和操作。

## en-US
Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page.

```jsx
import { PageHeader, Tag, Tabs, Button, Statistic, Row, Col } from 'antd';

const TabPane = Tabs.TabPane;

const Description = ({ term, children, span = 12 }) => (
  <Col span={span}>
    <div className="description">
      <div className="term">{term}</div>
      <div className="detail">{children}</div>
    </div>
  </Col>
);


const content = (
  <Row>
    <Description term="Created">Lili Qu</Description>
    <Description term="Association">
      <a>421421</a>
    </Description>
    <Description term="Creation Time">2017-01-10</Description>
    <Description term="Effective Time">2017-10-10</Description>
    <Description term="Remarks" span={24}>
      Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
    </Description>
  </Row>
);

const extraContent = (
  <Row>
    <Col span={12}>
      <Statistic title="Status" value="Pending" />
    </Col>
    <Col span={12}>
      <Statistic title="Price" prefix="$" value={568.08} />
    </Col>
  </Row>
);

ReactDOM.render(
  <PageHeader
    onBack={() => window.history.back()}
    title="Title"
    subTitle="This is a subtitle"
    tags={<Tag color="red">Warning</Tag>}
    extra={[
      <Button key="3">Operation</Button>,
      <Button key="2">Operation</Button>,
      <Button key="1" type="primary">
        Primary
      </Button>,
    ]}
    footer={
      <Tabs defaultActiveKey="1">
        <TabPane tab="Details" key="1" />
        <TabPane tab="Rule" key="2" />
      </Tabs>
    }
  >
    <div className="wrap">
      <div className="content padding">{content}</div>
      <div className="extraContent">{extraContent}</div>
    </div>
  </PageHeader>,
  mountNode
);

```

<style>
#components-page-header-demo-actions .wrap {
  display: flex;
}
#components-page-header-demo-actions .content {
  flex: 1;
}
#components-page-header-demo-actions .extraContent {
  min-width: 240px;
  text-align: right;
}
#components-page-header-demo-actions .content.padding {
  padding-left: 40px;
}
#components-page-header-demo-actions .content .description {
  display: table;
}
#components-page-header-demo-actions .description .term {
  display: table-cell;
  margin-right: 8px;
  padding-bottom: 8px;
  white-space: nowrap;
  line-height: 20px;
}
#components-page-header-demo-actions .description .term:after {
  position: relative;
  top: -0.5px;
  margin: 0 8px 0 2px;
  content: ":";
}
#components-page-header-demo-actions .description .detail {
  display: table-cell;
  padding-bottom: 8px;
  width: 100%;
  line-height: 20px;
}
</style>