PageHeader页头 - 图1

PageHeader 页头

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

何时使用

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

代码演示

PageHeader页头 - 图2

标准样式

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

  1. <template>
  2.   <a-page-header
  3.     style="border: 1px solid rgb(235, 237, 240)"
  4.     title="Title"
  5.     sub-title="This is a subtitle"
  6.     @back="() => null"
  7.   />
  8. </template>

PageHeader页头 - 图3

带面包屑页头

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

  1. <template>
  2.   <a-page-header
  3.     style="border: 1px solid rgb(235, 237, 240)"
  4.     title="Title"
  5.     :breadcrumb="{ routes }"
  6.     sub-title="This is a subtitle"
  7.   />
  8. </template>
  9. <script lang="ts">
  10. import { defineComponent } from 'vue';
  11. const routes = [
  12.   {
  13.     path: 'index',
  14.     breadcrumbName: 'First-level Menu',
  15.   },
  16.   {
  17.     path: 'first',
  18.     breadcrumbName: 'Second-level Menu',
  19.   },
  20.   {
  21.     path: 'second',
  22.     breadcrumbName: 'Third-level Menu',
  23.   },
  24. ];
  25. export default defineComponent({
  26.   setup() {
  27.     return {
  28.       routes,
  29.     };
  30.   },
  31. });
  32. </script>

PageHeader页头 - 图4

多种形态的 PageHeader

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

  1. <template>
  2.   <div>
  3.     <a-page-header
  4.       class="demo-page-header"
  5.       style="border: 1px solid rgb(235, 237, 240)"
  6.       title="Title"
  7.       sub-title="This is a subtitle"
  8.       @back="() => $router.go(-1)"
  9.     >
  10.       <template #extra>
  11.         <a-button key="3">Operation</a-button>
  12.         <a-button key="2">Operation</a-button>
  13.         <a-button key="1" type="primary">Primary</a-button>
  14.       </template>
  15.       <a-descriptions size="small" :column="3">
  16.         <a-descriptions-item label="Created">Lili Qu</a-descriptions-item>
  17.         <a-descriptions-item label="Association">
  18.           <a>421421</a>
  19.         </a-descriptions-item>
  20.         <a-descriptions-item label="Creation Time">2017-01-10</a-descriptions-item>
  21.         <a-descriptions-item label="Effective Time">2017-10-10</a-descriptions-item>
  22.         <a-descriptions-item label="Remarks">
  23.           Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
  24.         </a-descriptions-item>
  25.       </a-descriptions>
  26.     </a-page-header>
  27.     <br />
  28.     <a-page-header title="Title" sub-title="This is a subtitle" @back="() => $router.go(-1)">
  29.       <template #tags>
  30.         <a-tag color="blue">Running</a-tag>
  31.       </template>
  32.       <template v-slot:extra>
  33.         <a-button key="3">Operation</a-button>
  34.         <a-button key="2">Operation</a-button>
  35.         <a-button key="1" type="primary">Primary</a-button>
  36.       </template>
  37.       <a-row type="flex">
  38.         <a-statistic title="Status" value="Pending" />
  39.         <a-statistic
  40.           title="Price"
  41.           prefix="$"
  42.           :value="568.08"
  43.           :style="{
  44.             margin: '0 32px',
  45.           }"
  46.         />
  47.         <a-statistic title="Balance" prefix="$" :value="3345.08" />
  48.       </a-row>
  49.     </a-page-header>
  50.   </div>
  51. </template>
  53. <style scoped>
  54. .demo-page-header :deep(tr:last-child td) {
  55.   padding-bottom: 0;
  56. }
  57. </style>

PageHeader页头 - 图5

组合示例

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

  1. <template>
  2.   <div class="components-page-header-demo-content">
  3.     <a-page-header
  4.       title="Title"
  5.       class="site-page-header"
  6.       sub-title="This is a subtitle"
  7.       :avatar="{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }"
  8.       :breadcrumb="{ routes }"
  9.     >
  10.       <template v-slot:tags>
  11.         <a-tag color="blue">Running</a-tag>
  12.       </template>
  13.       <template v-slot:extra>
  14.         <a-button key="3">Operation</a-button>
  15.         <a-button key="2">Operation</a-button>
  16.         <a-button key="1" type="primary">Primary</a-button>
  17.         <a-dropdown key="more">
  18.           <a-button :style="{ border: 'none', padding: 0 }">
  19.             <EllipsisOutlined :style="{ fontSize: '20px', verticalAlign: 'top' }" />
  20.           </a-button>
  21.           <template v-slot:overlay>
  22.             <a-menu>
  23.               <a-menu-item>
  24.                 <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
  25.                   1st menu item
  26.                 </a>
  27.               </a-menu-item>
  28.               <a-menu-item>
  29.                 <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
  30.                   2nd menu item
  31.                 </a>
  32.               </a-menu-item>
  33.               <a-menu-item>
  34.                 <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
  35.                   3rd menu item
  36.                 </a>
  37.               </a-menu-item>
  38.             </a-menu>
  39.           </template>
  40.         </a-dropdown>
  41.       </template>
  42.       <a-row class="content">
  43.         <div style="flex: 1">
  44.           <p>
  45.             Ant Design interprets the color system into two levels: a system-level color system and
  46.             a product-level color system.
  47.           </p>
  48.           <p>
  49.             Ant Design&#x27;s design team preferred to design with the HSB color model, which makes
  50.             it easier for designers to have a clear psychological expectation of color when
  51.             adjusting colors, as well as facilitate communication in teams.
  52.           </p>
  53.           <div>
  54.             <template v-for="item in iconLinks" :key="item.src">
  55.               <a class="example-link">
  56.                 <img class="example-link-icon" :src="item.src" :alt="item.text" />
  57.                 {{ item.text }}
  58.               </a>
  59.             </template>
  60.           </div>
  61.         </div>
  62.         <div class="image">
  63.           <img
  64.             src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
  65.             alt="content"
  66.             style="width: 100%"
  67.           />
  68.         </div>
  69.       </a-row>
  70.     </a-page-header>
  71.   </div>
  72. </template>
  73. <script lang="ts">
  74. import { defineComponent } from 'vue';
  75. import { EllipsisOutlined } from '@ant-design/icons-vue';
  77. const routes = [
  78.   {
  79.     path: 'index',
  80.     breadcrumbName: 'First-level Menu',
  81.   },
  82.   {
  83.     path: 'first',
  84.     breadcrumbName: 'Second-level Menu',
  85.   },
  86.   {
  87.     path: 'second',
  88.     breadcrumbName: 'Third-level Menu',
  89.   },
  90. ];
  92. interface IconLink {
  93.   src: string;
  94.   text: string;
  95. }
  96. const iconLinks: IconLink[] = [
  97.   {
  98.     src: 'https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg',
  99.     text: 'Quick Start',
  100.   },
  101.   {
  102.     src: 'https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg',
  103.     text: 'Product Info',
  104.   },
  105.   {
  106.     src: 'https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg',
  107.     text: 'Product Doc',
  108.   },
  109. ];
  111. export default defineComponent({
  112.   setup() {
  113.     return {
  114.       routes,
  115.       iconLinks,
  116.     };
  117.   },
  118.   components: {
  119.     EllipsisOutlined,
  120.   },
  121. });
  122. </script>
  123. <style scoped>
  124. #components-page-header-demo-content .image {
  125.   margin: 0 0 0 60px;
  126.   display: flex;
  127.   align-items: center;
  128. }
  130. #components-page-header-demo-content .ant-page-header-rtl .image {
  131.   margin: 0 60px 0 0;
  132. }
  134. #components-page-header-demo-content .example-link {
  135.   line-height: 24px;
  136.   margin-right: 16px;
  137. }
  138. [data-theme='compact'] #components-page-header-demo-content .example-link {
  139.   line-height: 20px;
  140. }
  141. #components-page-header-demo-content .example-link-icon {
  142.   margin-right: 8px;
  143. }
  145. [data-theme='compact'] #components-page-header-demo-content .example-link-icon {
  146.   width: 20px;
  147.   height: 20px;
  148. }
  150. #components-page-header-demo-content .ant-page-header-rtl .example-link {
  151.   float: right;
  152.   margin-right: 0;
  153.   margin-left: 16px;
  154. }
  155. #components-page-header-demo-content .ant-page-header-rtl .example-link-icon {
  156.   margin-right: 0;
  157.   margin-left: 8px;
  158. }
  159. #components-page-header-demo-content .content p {
  160.   margin-bottom: 1em;
  161.   color: rgba(0, 0, 0, 0.85);
  162.   overflow-wrap: break-word;
  163. }
  165. @media (max-width: 768px) {
  166.   #components-page-header-demo-content .image {
  167.     flex: 100%;
  168.     margin: 24px 0 0;
  169.   }
  170. }
  171. </style>

PageHeader页头 - 图6

响应式

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

  1. <template>
  2.   <div class="components-page-header-demo-responsive">
  3.     <a-page-header
  4.       style="border: 1px solid rgb(235, 237, 240)"
  5.       title="Title"
  6.       sub-title="This is a subtitle"
  7.       @back="() => $router.go(-1)"
  8.     >
  9.       <template #extra>
  10.         <a-button key="3">Operation</a-button>
  11.         <a-button key="2">Operation</a-button>
  12.         <a-button key="1" type="primary">Primary</a-button>
  13.       </template>
  14.       <template #footer>
  15.         <a-tabs default-active-key="1">
  16.           <a-tab-pane key="1" tab="Details" />
  17.           <a-tab-pane key="2" tab="Rule" />
  18.         </a-tabs>
  19.       </template>
  20.       <div class="content">
  21.         <div class="main">
  22.           <a-descriptions size="small" :column="2">
  23.             <a-descriptions-item label="Created">Lili Qu</a-descriptions-item>
  24.             <a-descriptions-item label="Association">
  25.               <a>421421</a>
  26.             </a-descriptions-item>
  27.             <a-descriptions-item label="Creation Time">2017-01-10</a-descriptions-item>
  28.             <a-descriptions-item label="Effective Time">2017-10-10</a-descriptions-item>
  29.             <a-descriptions-item label="Remarks">
  30.               Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
  31.             </a-descriptions-item>
  32.           </a-descriptions>
  33.         </div>
  34.         <div class="extra">
  35.           <div
  36.             :style="{
  37.               display: 'flex',
  38.               width: 'max-content',
  39.               justifyContent: 'flex-end',
  40.             }"
  41.           >
  42.             <a-statistic
  43.               title="Status"
  44.               value="Pending"
  45.               :style="{
  46.                 marginRight: '32px',
  47.               }"
  48.             />
  49.             <a-statistic title="Price" prefix="$" :value="568.08" />
  50.           </div>
  51.         </div>
  52.       </div>
  53.     </a-page-header>
  54.   </div>
  55. </template>
  57. <style>
  58. .components-page-header-demo-responsive tr:last-child td {
  59.   padding-bottom: 0;
  60. }
  61. #components-page-header-demo-responsive .content {
  62.   display: flex;
  63. }
  64. #components-page-header-demo-responsive .ant-statistic-content {
  65.   font-size: 20px;
  66.   line-height: 28px;
  67. }
  68. @media (max-width: 576px) {
  69.   #components-page-header-demo-responsive .content {
  70.     display: block;
  71.   }
  73.   #components-page-header-demo-responsive .main {
  74.     width: 100%;
  75.     margin-bottom: 12px;
  76.   }
  78.   #components-page-header-demo-responsive .extra {
  79.     width: 100%;
  80.     margin-left: 0;
  81.     text-align: left;
  82.   }
  83. }
  84. </style>

PageHeader页头 - 图7

白底模式

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

  1. <template>
  2.   <div class="demo-page-header" style="background-color: #f5f5f5; padding: 24px">
  3.     <a-page-header
  4.       :ghost="false"
  5.       title="Title"
  6.       sub-title="This is a subtitle"
  7.       @back="() => $router.go(-1)"
  8.     >
  9.       <template #extra>
  10.         <a-button key="3">Operation</a-button>
  11.         <a-button key="2">Operation</a-button>
  12.         <a-button key="1" type="primary">Primary</a-button>
  13.       </template>
  14.       <a-descriptions size="small" :column="3">
  15.         <a-descriptions-item label="Created">Lili Qu</a-descriptions-item>
  16.         <a-descriptions-item label="Association">
  17.           <a>421421</a>
  18.         </a-descriptions-item>
  19.         <a-descriptions-item label="Creation Time">2017-01-10</a-descriptions-item>
  20.         <a-descriptions-item label="Effective Time">2017-10-10</a-descriptions-item>
  21.         <a-descriptions-item label="Remarks">
  22.           Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
  23.         </a-descriptions-item>
  24.       </a-descriptions>
  25.     </a-page-header>
  26.   </div>
  27. </template>
  29. <style scoped>
  30. .demo-page-header :deep(tr:last-child td) {
  31.   padding-bottom: 0;
  32. }
  33. </style>

API

参数说明类型默认值
title自定义标题文字string|slot-
subTitle自定义的二级标题文字string|slot-
ghostpageHeader 的类型，将会改变背景颜色booleantrue
avatar标题栏旁的头像avatar props-
backIcon自定义 back icon ，如果为 false 不渲染 back iconstring|slot<ArrowLeft />
tagstitle 旁的 tag 列表Tag[] | Tag-
extra操作区，位于 title 行的行尾string|slot-
breadcrumb面包屑的配置breadcrumb-
footerPageHeader 的页脚，一般用于渲染 TabBarstring|slot-

事件

事件名称说明回调参数
back返回按钮的点击事件function(e)