2019-03-02 15:51:08 +08:00
---
2019-08-25 15:38:51 +08:00
order: 4
2019-03-02 15:51:08 +08:00
title:
2019-08-25 15:38:51 +08:00
zh-CN: 多种形态的 PageHeader
en-US: Various forms of PageHeader
2019-03-02 15:51:08 +08:00
---
## zh-CN
使用操作区,并自定义子节点,适合使用在需要展示一些复杂的信息,帮助用户快速了解这个页面的信息和操作。
## en-US
2019-05-07 14:57:32 +08:00
2019-03-02 15:51:08 +08:00
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
2019-08-25 15:38:51 +08:00
import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd';
2019-03-02 15:51:08 +08:00
ReactDOM.render(
2019-08-25 15:38:51 +08:00
< div >
< PageHeader
onBack={() => window.history.back()}
title="Title"
subTitle="This is a subtitle"
extra={[
< Button key = "3" > Operation< / Button > ,
< Button key = "2" > Operation< / Button > ,
< Button key = "1" type = "primary" >
Primary
< / Button > ,
]}
>
< Descriptions size = "small" column = {3} >
< Descriptions.item label = "Created" > Lili Qu< / Descriptions.item >
< Descriptions.item label = "Association" >
< a > 421421< / a >
< / Descriptions.item >
< Descriptions.item label = "Creation Time" > 2017-01-10< / Descriptions.item >
< Descriptions.item label = "Effective Time" > 2017-10-10< / Descriptions.item >
< Descriptions.item label = "Remarks" >
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
< / Descriptions.item >
< / Descriptions >
< / PageHeader >
< br / >
< PageHeader
onBack={() => window.history.back()}
title="Title"
tags={< Tag color = "blue" > Running< / Tag > }
subTitle="This is a subtitle"
extra={[
< Button key = "3" > Operation< / Button > ,
< Button key = "2" > Operation< / Button > ,
< Button key = "1" type = "primary" >
Primary
< / Button > ,
]}
>
< Row type = "flex" >
< Statistic title = "Status" value = "Pending" / >
< Statistic
title="Price"
prefix="$"
value={568.08}
style={{
margin: '0 32px',
}}
/>
< Statistic title = "Balance" prefix = "$" value = {3345.08} / >
< / Row >
< / PageHeader >
< / div > ,
2019-05-07 14:57:32 +08:00
mountNode,
2019-03-02 15:51:08 +08:00
);
```
< style >
2019-08-25 15:38:51 +08:00
tr:last-child td {
padding-bottom: 0;
2019-03-02 15:51:08 +08:00
}
< / style >