PageHeader页头
页头位于页容器中,页容器顶部,起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。
何时使用
当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用,通常也可被用作页面间导航。
代码演示
标准页头,适合使用在需要简单描述的场景。
import { PageHeader } from 'antd';
ReactDOM.render(
<PageHeader
style={{
border: '1px solid rgb(235, 237, 240)',
}}
onBack={() => null}
title="Title"
subTitle="This is a subtitle"
/>,
mountNode,
);
默认 PageHeader 是透明底色的。在某些情况下,PageHeader 需要自己的背景颜色。
import { PageHeader, Button, Descriptions } from 'antd';
ReactDOM.render(
<div
style={{
backgroundColor: '#F5F5F5',
padding: 24,
}}
>
<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>
</div>,
mountNode,
);
带面包屑页头,适合层级比较深的页面,让用户可以快速导航。
import { PageHeader } from 'antd';
const routes = [
{
path: 'index',
breadcrumbName: 'First-level Menu',
},
{
path: 'first',
breadcrumbName: 'Second-level Menu',
},
{
path: 'second',
breadcrumbName: 'Third-level Menu',
},
];
ReactDOM.render(
<PageHeader
style={{
border: '1px solid rgb(235, 237, 240)',
}}
title="Title"
breadcrumb={{ routes }}
subTitle="This is a subtitle"
/>,
mountNode,
);
使用了 pageHeader 提供的所有能力。
import { PageHeader, Menu, Dropdown, Icon, Button, Tag, Typography, Row } from 'antd';
const { Paragraph } = Typography;
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
1st menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
2nd menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
3rd menu item
</a>
</Menu.Item>
</Menu>
);
const DropdownMenu = () => {
return (
<Dropdown key="more" overlay={menu}>
<Button
style={{
border: 'none',
padding: 0,
}}
>
<Icon
type="ellipsis"
style={{
fontSize: 20,
verticalAlign: 'top',
}}
/>
</Button>
</Dropdown>
);
};
const routes = [
{
path: 'index',
breadcrumbName: 'First-level Menu',
},
{
path: 'first',
breadcrumbName: 'Second-level Menu',
},
{
path: 'second',
breadcrumbName: 'Third-level Menu',
},
];
const IconLink = ({ src, text }) => (
<a
style={{
marginRight: 16,
display: 'flex',
alignItems: 'center',
}}
>
<img
style={{
marginRight: 8,
}}
src={src}
alt="start"
/>
{text}
</a>
);
const content = (
<div className="content">
<Paragraph>
Ant Design interprets the color system into two levels: a system-level color system and a
product-level color system.
</Paragraph>
<Paragraph>
Ant Design's design team preferred to design with the HSB color model, which makes it
easier for designers to have a clear psychological expectation of color when adjusting colors,
as well as facilitate communication in teams.
</Paragraph>
<Row className="contentLink" type="flex">
<IconLink
src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
text="Quick Start"
/>
<IconLink
src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
text=" Product Info"
/>
<IconLink
src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
text="Product Doc"
/>
</Row>
</div>
);
const Content = ({ children, extraContent }) => {
return (
<Row className="content" type="flex">
<div className="main" style={{ flex: 1 }}>
{children}
</div>
<div
className="extra"
style={{
marginLeft: 80,
}}
>
{extraContent}
</div>
</Row>
);
};
ReactDOM.render(
<PageHeader
title="Title"
style={{
border: '1px solid rgb(235, 237, 240)',
}}
subTitle="This is a subtitle"
tags={<Tag color="blue">Running</Tag>}
extra={[
<Button key="3">Operation</Button>,
<Button key="2">Operation</Button>,
<Button key="1" type="primary">
Primary
</Button>,
<DropdownMenu key="more" />,
]}
avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }}
breadcrumb={{ routes }}
>
<Content
extraContent={
<img
src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
alt="content"
/>
}
>
{content}
</Content>
</PageHeader>,
mountNode,
);
使用操作区,并自定义子节点,适合使用在需要展示一些复杂的信息,帮助用户快速了解这个页面的信息和操作。
import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd';
ReactDOM.render(
<div>
<PageHeader
style={{
border: '1px solid rgb(235, 237, 240)',
}}
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>,
mountNode,
);
在不同大小的屏幕下,应该有不同的表现
import { PageHeader, Tabs, Button, Statistic, Descriptions } from 'antd';
const { TabPane } = Tabs;
const renderContent = (column = 2) => (
<Descriptions size="small" column={column}>
<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>
);
const extraContent = (
<div
style={{
display: 'flex',
width: 'max-content',
justifyContent: 'flex-end',
}}
>
<Statistic
title="Status"
value="Pending"
style={{
marginRight: 32,
}}
/>
<Statistic title="Price" prefix="$" value={568.08} />
</div>
);
const Content = ({ children, extra }) => {
return (
<div className="content">
<div className="main">{children}</div>
<div className="extra">{extra}</div>
</div>
);
};
ReactDOM.render(
<div>
<PageHeader
style={{
border: '1px solid rgb(235, 237, 240)',
}}
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>,
]}
footer={
<Tabs defaultActiveKey="1">
<TabPane tab="Details" key="1" />
<TabPane tab="Rule" key="2" />
</Tabs>
}
>
<Content extra={extraContent}>{renderContent()}</Content>
</PageHeader>
</div>,
mountNode,
);
API
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
title | 自定义标题文字 | ReactNode | - | 3.14.0 |
subTitle | 自定义的二级标题文字 | ReactNode | - | 3.14.0 |
ghost | pageHeader 的类型,将会改变背景颜色 | boolean | true | 3.24.0 |
avatar | 标题栏旁的头像 | avatar props | - | 3.22.0 |
backIcon | 自定义 back icon ,如果为 false 不渲染 back icon | ReactNode | <Icon type="arrow-left" /> | 3.14.0 |
tags | title 旁的 tag 列表 | Tag[] | Tag | - | 3.14.0 |
extra | 操作区,位于 title 行的行尾 | ReactNode | - | 3.14.0 |
breadcrumb | 面包屑的配置 | breadcrumb | - | 3.14.0 |
footer | PageHeader 的页脚,一般用于渲染 TabBar | ReactNode | - | 3.14.0 |
onBack | 返回按钮的点击事件 | ()=>void | ()=>history.back() | 3.14.0 |