PageHeader页头

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

何时使用

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

代码演示

PageHeader页头 - 图1

标准样式

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

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

PageHeader页头 - 图2

白底模式

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

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

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. style={{
  19. border: '1px solid rgb(235, 237, 240)',
  20. }}
  21. title="Title"
  22. breadcrumb={{ routes }}
  23. subTitle="This is a subtitle"
  24. />,
  25. mountNode,
  26. );

PageHeader页头 - 图4

组合示例

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

  1. import { PageHeader, Menu, Dropdown, Icon, Button, Tag, Typography, Row } from 'antd';
  2. const { Paragraph } = Typography;
  3. const menu = (
  4. <Menu>
  5. <Menu.Item>
  6. <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
  7. 1st menu item
  8. </a>
  9. </Menu.Item>
  10. <Menu.Item>
  11. <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
  12. 2nd menu item
  13. </a>
  14. </Menu.Item>
  15. <Menu.Item>
  16. <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
  17. 3rd menu item
  18. </a>
  19. </Menu.Item>
  20. </Menu>
  21. );
  22. const DropdownMenu = () => {
  23. return (
  24. <Dropdown key="more" overlay={menu}>
  25. <Button
  26. style={{
  27. border: 'none',
  28. padding: 0,
  29. }}
  30. >
  31. <Icon
  32. type="ellipsis"
  33. style={{
  34. fontSize: 20,
  35. verticalAlign: 'top',
  36. }}
  37. />
  38. </Button>
  39. </Dropdown>
  40. );
  41. };
  42. const routes = [
  43. {
  44. path: 'index',
  45. breadcrumbName: 'First-level Menu',
  46. },
  47. {
  48. path: 'first',
  49. breadcrumbName: 'Second-level Menu',
  50. },
  51. {
  52. path: 'second',
  53. breadcrumbName: 'Third-level Menu',
  54. },
  55. ];
  56. const IconLink = ({ src, text }) => (
  57. <a
  58. style={{
  59. marginRight: 16,
  60. display: 'flex',
  61. alignItems: 'center',
  62. }}
  63. >
  64. <img
  65. style={{
  66. marginRight: 8,
  67. }}
  68. src={src}
  69. alt="start"
  70. />
  71. {text}
  72. </a>
  73. );
  74. const content = (
  75. <div className="content">
  76. <Paragraph>
  77. Ant Design interprets the color system into two levels: a system-level color system and a
  78. product-level color system.
  79. </Paragraph>
  80. <Paragraph>
  81. Ant Design&#x27;s design team preferred to design with the HSB color model, which makes it
  82. easier for designers to have a clear psychological expectation of color when adjusting colors,
  83. as well as facilitate communication in teams.
  84. </Paragraph>
  85. <Row className="contentLink" type="flex">
  86. <IconLink
  87. src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
  88. text="Quick Start"
  89. />
  90. <IconLink
  91. src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
  92. text=" Product Info"
  93. />
  94. <IconLink
  95. src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
  96. text="Product Doc"
  97. />
  98. </Row>
  99. </div>
  100. );
  101. const Content = ({ children, extraContent }) => {
  102. return (
  103. <Row className="content" type="flex">
  104. <div className="main" style={{ flex: 1 }}>
  105. {children}
  106. </div>
  107. <div
  108. className="extra"
  109. style={{
  110. marginLeft: 80,
  111. }}
  112. >
  113. {extraContent}
  114. </div>
  115. </Row>
  116. );
  117. };
  118. ReactDOM.render(
  119. <PageHeader
  120. title="Title"
  121. style={{
  122. border: '1px solid rgb(235, 237, 240)',
  123. }}
  124. subTitle="This is a subtitle"
  125. tags={<Tag color="blue">Running</Tag>}
  126. extra={[
  127. <Button key="3">Operation</Button>,
  128. <Button key="2">Operation</Button>,
  129. <Button key="1" type="primary">
  130. Primary
  131. </Button>,
  132. <DropdownMenu key="more" />,
  133. ]}
  134. avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }}
  135. breadcrumb={{ routes }}
  136. >
  137. <Content
  138. extraContent={
  139. <img
  140. src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
  141. alt="content"
  142. />
  143. }
  144. >
  145. {content}
  146. </Content>
  147. </PageHeader>,
  148. mountNode,
  149. );

PageHeader页头 - 图5

多种形态的 PageHeader

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

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

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. return (
  36. <div className="content">
  37. <div className="main">{children}</div>
  38. <div className="extra">{extra}</div>
  39. </div>
  40. );
  41. };
  42. ReactDOM.render(
  43. <div>
  44. <PageHeader
  45. style={{
  46. border: '1px solid rgb(235, 237, 240)',
  47. }}
  48. onBack={() => window.history.back()}
  49. title="Title"
  50. subTitle="This is a subtitle"
  51. extra={[
  52. <Button key="3">Operation</Button>,
  53. <Button key="2">Operation</Button>,
  54. <Button key="1" type="primary">
  55. Primary
  56. </Button>,
  57. ]}
  58. footer={
  59. <Tabs defaultActiveKey="1">
  60. <TabPane tab="Details" key="1" />
  61. <TabPane tab="Rule" key="2" />
  62. </Tabs>
  63. }
  64. >
  65. <Content extra={extraContent}>{renderContent()}</Content>
  66. </PageHeader>
  67. </div>,
  68. mountNode,
  69. );

API

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