2019-10-15 11:46:12 +08:00
|
|
|
|
---
|
|
|
|
|
order: 2
|
|
|
|
|
title:
|
|
|
|
|
zh-CN: 白底模式
|
|
|
|
|
en-US: white background mode
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
|
|
默认 PageHeader 是透明底色的。在某些情况下,PageHeader 需要自己的背景颜色。
|
|
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
|
|
The default PageHeader is a transparent background. In some cases, PageHeader needs its own background color.
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
import { PageHeader, Button, Descriptions } from 'antd';
|
|
|
|
|
|
2022-04-03 23:27:45 +08:00
|
|
|
|
export default () => (
|
2019-12-23 18:36:49 +08:00
|
|
|
|
<div className="site-page-header-ghost-wrapper">
|
2019-10-15 11:46:12 +08:00
|
|
|
|
<PageHeader
|
|
|
|
|
ghost={false}
|
|
|
|
|
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>
|
2022-04-03 23:27:45 +08:00
|
|
|
|
</div>
|
2019-10-15 11:46:12 +08:00
|
|
|
|
);
|
|
|
|
|
```
|
2019-12-23 18:36:49 +08:00
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
.site-page-header-ghost-wrapper {
|
|
|
|
|
padding: 24px;
|
2021-01-30 19:39:02 +08:00
|
|
|
|
background-color: #f5f5f5;
|
2019-12-23 18:36:49 +08:00
|
|
|
|
}
|
|
|
|
|
```
|