PageHeader页头

页头位于页容器中,页容器顶部,起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。

何时使用

当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用,通常也可被用作页面间导航。

代码演示

PageHeader页头 - 图1

标准样式

标准页头,适合使用在需要简单描述的场景。

  1. import { PageHeader } from 'antd';
  2. ReactDOM.render(
  3. <PageHeader
  4. className="site-page-header"
  5. onBack={() => null}
  6. title="Title"
  7. subTitle="This is a subtitle"
  8. />,
  9. mountNode,
  10. );
  1. .site-page-header {
  2. border: 1px solid rgb(235, 237, 240);
  3. }

PageHeader页头 - 图2

白底模式

默认 PageHeader 是透明底色的。在某些情况下,PageHeader 需要自己的背景颜色。

  1. import { PageHeader, Button, Descriptions } from 'antd';
  2. ReactDOM.render(
  3. <div className="site-page-header-ghost-wrapper">
  4. <PageHeader
  5. ghost={false}
  6. onBack={() => window.history.back()}
  7. title="Title"
  8. subTitle="This is a subtitle"
  9. extra={[
  10. <Button key="3">Operation</Button>,
  11. <Button key="2">Operation</Button>,
  12. <Button key="1" type="primary">
  13. Primary
  14. </Button>,
  15. ]}
  16. >
  17. <Descriptions size="small" column={3}>
  18. <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
  19. <Descriptions.Item label="Association">
  20. <a>421421</a>
  21. </Descriptions.Item>
  22. <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
  23. <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
  24. <Descriptions.Item label="Remarks">
  25. Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
  26. </Descriptions.Item>
  27. </Descriptions>
  28. </PageHeader>
  29. </div>,
  30. mountNode,
  31. );
  1. .site-page-header-ghost-wrapper {
  2. background-color: #f5f5f5;
  3. padding: 24px;
  4. }

PageHeader页头 - 图3

带面包屑页头

带面包屑页头,适合层级比较深的页面,让用户可以快速导航。

  1. import { PageHeader } from 'antd';
  2. const routes = [
  3. {
  4. path: 'index',
  5. breadcrumbName: 'First-level Menu',
  6. },
  7. {
  8. path: 'first',
  9. breadcrumbName: 'Second-level Menu',
  10. },
  11. {
  12. path: 'second',
  13. breadcrumbName: 'Third-level Menu',
  14. },
  15. ];
  16. ReactDOM.render(
  17. <PageHeader
  18. className="site-page-header"
  19. title="Title"
  20. breadcrumb={{ routes }}
  21. subTitle="This is a subtitle"
  22. />,
  23. mountNode,
  24. );

PageHeader页头 - 图4

组合示例

使用了 PageHeader 提供的所有能力。

  1. import { PageHeader, Menu, Dropdown, Button, Tag, Typography, Row } from 'antd';
  2. import { EllipsisOutlined } from '@ant-design/icons';
  3. const { Paragraph } = Typography;
  4. const menu = (
  5. <Menu>
  6. <Menu.Item>
  7. <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
  8. 1st menu item
  9. </a>
  10. </Menu.Item>
  11. <Menu.Item>
  12. <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
  13. 2nd menu item
  14. </a>
  15. </Menu.Item>
  16. <Menu.Item>
  17. <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
  18. 3rd menu item
  19. </a>
  20. </Menu.Item>
  21. </Menu>
  22. );
  23. const DropdownMenu = () => (
  24. <Dropdown key="more" overlay={menu}>
  25. <Button
  26. style={{
  27. border: 'none',
  28. padding: 0,
  29. }}
  30. >
  31. <EllipsisOutlined
  32. style={{
  33. fontSize: 20,
  34. verticalAlign: 'top',
  35. }}
  36. />
  37. </Button>
  38. </Dropdown>
  39. );
  40. const routes = [
  41. {
  42. path: 'index',
  43. breadcrumbName: 'First-level Menu',
  44. },
  45. {
  46. path: 'first',
  47. breadcrumbName: 'Second-level Menu',
  48. },
  49. {
  50. path: 'second',
  51. breadcrumbName: 'Third-level Menu',
  52. },
  53. ];
  54. const IconLink = ({ src, text }) => (
  55. <a className="example-link">
  56. <img className="example-link-icon" src={src} alt={text} />
  57. {text}
  58. </a>
  59. );
  60. const content = (
  61. <>
  62. <Paragraph>
  63. Ant Design interprets the color system into two levels: a system-level color system and a
  64. product-level color system.
  65. </Paragraph>
  66. <Paragraph>
  67. Ant Design&#x27;s design team preferred to design with the HSB color model, which makes it
  68. easier for designers to have a clear psychological expectation of color when adjusting colors,
  69. as well as facilitate communication in teams.
  70. </Paragraph>
  71. <div>
  72. <IconLink
  73. src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
  74. text="Quick Start"
  75. />
  76. <IconLink
  77. src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
  78. text=" Product Info"
  79. />
  80. <IconLink
  81. src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
  82. text="Product Doc"
  83. />
  84. </div>
  85. </>
  86. );
  87. const Content = ({ children, extraContent }) => (
  88. <Row>
  89. <div style={{ flex: 1 }}>{children}</div>
  90. <div className="image">{extraContent}</div>
  91. </Row>
  92. );
  93. ReactDOM.render(
  94. <PageHeader
  95. title="Title"
  96. className="site-page-header"
  97. subTitle="This is a subtitle"
  98. tags={<Tag color="blue">Running</Tag>}
  99. extra={[
  100. <Button key="3">Operation</Button>,
  101. <Button key="2">Operation</Button>,
  102. <Button key="1" type="primary">
  103. Primary
  104. </Button>,
  105. <DropdownMenu key="more" />,
  106. ]}
  107. avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }}
  108. breadcrumb={{ routes }}
  109. >
  110. <Content
  111. extraContent={
  112. <img
  113. src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
  114. alt="content"
  115. width="100%"
  116. />
  117. }
  118. >
  119. {content}
  120. </Content>
  121. </PageHeader>,
  122. mountNode,
  123. );
  1. #components-page-header-demo-content .image {
  2. margin: 0 0 0 60px;
  3. display: flex;
  4. align-items: center;
  5. }
  6. #components-page-header-demo-content .ant-page-header-rtl .image {
  7. margin: 0 60px 0 0;
  8. }
  9. #components-page-header-demo-content .example-link {
  10. line-height: 24px;
  11. margin-right: 16px;
  12. }
  13. [data-theme='compact'] #components-page-header-demo-content .example-link {
  14. line-height: 20px;
  15. }
  16. #components-page-header-demo-content .example-link-icon {
  17. margin-right: 8px;
  18. }
  19. [data-theme='compact'] #components-page-header-demo-content .example-link-icon {
  20. width: 20px;
  21. height: 20px;
  22. }
  23. #components-page-header-demo-content .ant-page-header-rtl .example-link {
  24. float: right;
  25. margin-right: 0;
  26. margin-left: 16px;
  27. }
  28. #components-page-header-demo-content .ant-page-header-rtl .example-link-icon {
  29. margin-right: 0;
  30. margin-left: 8px;
  31. }
  32. @media (max-width: 768px) {
  33. #components-page-header-demo-content .image {
  34. flex: 100%;
  35. margin: 24px 0 0;
  36. }
  37. }

PageHeader页头 - 图5

多种形态的 PageHeader

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

  1. import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd';
  2. ReactDOM.render(
  3. <>
  4. <PageHeader
  5. className="site-page-header"
  6. onBack={() => window.history.back()}
  7. title="Title"
  8. subTitle="This is a subtitle"
  9. extra={[
  10. <Button key="3">Operation</Button>,
  11. <Button key="2">Operation</Button>,
  12. <Button key="1" type="primary">
  13. Primary
  14. </Button>,
  15. ]}
  16. >
  17. <Descriptions size="small" column={3}>
  18. <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
  19. <Descriptions.Item label="Association">
  20. <a>421421</a>
  21. </Descriptions.Item>
  22. <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
  23. <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
  24. <Descriptions.Item label="Remarks">
  25. Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
  26. </Descriptions.Item>
  27. </Descriptions>
  28. </PageHeader>
  29. <br />
  30. <PageHeader
  31. onBack={() => window.history.back()}
  32. title="Title"
  33. tags={<Tag color="blue">Running</Tag>}
  34. subTitle="This is a subtitle"
  35. extra={[
  36. <Button key="3">Operation</Button>,
  37. <Button key="2">Operation</Button>,
  38. <Button key="1" type="primary">
  39. Primary
  40. </Button>,
  41. ]}
  42. >
  43. <Row>
  44. <Statistic title="Status" value="Pending" />
  45. <Statistic
  46. title="Price"
  47. prefix="$"
  48. value={568.08}
  49. style={{
  50. margin: '0 32px',
  51. }}
  52. />
  53. <Statistic title="Balance" prefix="$" value={3345.08} />
  54. </Row>
  55. </PageHeader>
  56. </>,
  57. mountNode,
  58. );

PageHeader页头 - 图6

响应式

在不同大小的屏幕下,应该有不同的表现

  1. import { PageHeader, Tabs, Button, Statistic, Descriptions } from 'antd';
  2. const { TabPane } = Tabs;
  3. const renderContent = (column = 2) => (
  4. <Descriptions size="small" column={column}>
  5. <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
  6. <Descriptions.Item label="Association">
  7. <a>421421</a>
  8. </Descriptions.Item>
  9. <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
  10. <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
  11. <Descriptions.Item label="Remarks">
  12. Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
  13. </Descriptions.Item>
  14. </Descriptions>
  15. );
  16. const extraContent = (
  17. <div
  18. style={{
  19. display: 'flex',
  20. width: 'max-content',
  21. justifyContent: 'flex-end',
  22. }}
  23. >
  24. <Statistic
  25. title="Status"
  26. value="Pending"
  27. style={{
  28. marginRight: 32,
  29. }}
  30. />
  31. <Statistic title="Price" prefix="$" value={568.08} />
  32. </div>
  33. );
  34. const Content = ({ children, extra }) => (
  35. <div className="content">
  36. <div className="main">{children}</div>
  37. <div className="extra">{extra}</div>
  38. </div>
  39. );
  40. ReactDOM.render(
  41. <>
  42. <PageHeader
  43. className="site-page-header-responsive"
  44. onBack={() => window.history.back()}
  45. title="Title"
  46. subTitle="This is a subtitle"
  47. extra={[
  48. <Button key="3">Operation</Button>,
  49. <Button key="2">Operation</Button>,
  50. <Button key="1" type="primary">
  51. Primary
  52. </Button>,
  53. ]}
  54. footer={
  55. <Tabs defaultActiveKey="1">
  56. <TabPane tab="Details" key="1" />
  57. <TabPane tab="Rule" key="2" />
  58. </Tabs>
  59. }
  60. >
  61. <Content extra={extraContent}>{renderContent()}</Content>
  62. </PageHeader>
  63. </>,
  64. mountNode,
  65. );

API

参数说明类型默认值版本
avatar标题栏旁的头像AvatarProps-
backIcon自定义 back icon ,如果为 false 不渲染 back iconReactNode | boolean<ArrowLeft />
breadcrumb面包屑的配置Breadcrumb-
extra操作区,位于 title 行的行尾ReactNode-
footerPageHeader 的页脚,一般用于渲染 TabBarReactNode-
ghostpageHeader 的类型,将会改变背景颜色booleantrue
subTitle自定义的二级标题文字ReactNode-
tagstitle 旁的 tag 列表Tag[] | Tag-
title自定义标题文字ReactNode-
onBack返回按钮的点击事件() => void-