PageHeader 页头 (版本: 1.5.0+)

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

何时使用

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

代码演示

PageHeader页头 - 图1

标准样式

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

  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页头 - 图2

带面包屑页头

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

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

PageHeader页头 - 图3

多种形态的 PageHeader

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

  1. <template>
  2.   <div>
  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 slot="extra">
  10.         <a-button key="3">
  11.           Operation
  12.         </a-button>
  13.         <a-button key="2">
  14.           Operation
  15.         </a-button>
  16.         <a-button key="1" type="primary">
  17.           Primary
  18.         </a-button>
  19.       </template>
  20.       <a-descriptions size="small" :column="3">
  21.         <a-descriptions-item label="Created">
  22.           Lili Qu
  23.         </a-descriptions-item>
  24.         <a-descriptions-item label="Association">
  25.           <a>421421</a>
  26.         </a-descriptions-item>
  27.         <a-descriptions-item label="Creation Time">
  28.           2017-01-10
  29.         </a-descriptions-item>
  30.         <a-descriptions-item label="Effective Time">
  31.           2017-10-10
  32.         </a-descriptions-item>
  33.         <a-descriptions-item label="Remarks">
  34.           Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
  35.         </a-descriptions-item>
  36.       </a-descriptions>
  37.     </a-page-header>
  38.     <br />
  39.     <a-page-header title="Title" sub-title="This is a subtitle" @back="() => $router.go(-1)">
  40.       <template slot="tags">
  41.         <a-tag color="blue">
  42.           Running
  43.         </a-tag>
  44.       </template>
  45.       <template slot="extra">
  46.         <a-button key="3">
  47.           Operation
  48.         </a-button>
  49.         <a-button key="2">
  50.           Operation
  51.         </a-button>
  52.         <a-button key="1" type="primary">
  53.           Primary
  54.         </a-button>
  55.       </template>
  56.       <a-row type="flex">
  57.         <a-statistic title="Status" value="Pending" />
  58.         <a-statistic
  59.           title="Price"
  60.           prefix="$"
  61.           :value="568.08"
  62.           :style="{
  63.             margin: '0 32px',
  64.           }"
  65.         />
  66.         <a-statistic title="Balance" prefix="$" :value="3345.08" />
  67.       </a-row>
  68.     </a-page-header>
  69.   </div>
  70. </template>
  71. <style>
  72. tr:last-child td {
  73.   padding-bottom: 0;
  74. }
  75. </style>

PageHeader页头 - 图4

响应式

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

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

PageHeader页头 - 图5

白底模式

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

  1. <template>
  2.   <div 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 slot="extra">
  10.         <a-button key="3">
  11.           Operation
  12.         </a-button>
  13.         <a-button key="2">
  14.           Operation
  15.         </a-button>
  16.         <a-button key="1" type="primary">
  17.           Primary
  18.         </a-button>
  19.       </template>
  20.       <a-descriptions size="small" :column="3">
  21.         <a-descriptions-item label="Created">
  22.           Lili Qu
  23.         </a-descriptions-item>
  24.         <a-descriptions-item label="Association">
  25.           <a>421421</a>
  26.         </a-descriptions-item>
  27.         <a-descriptions-item label="Creation Time">
  28.           2017-01-10
  29.         </a-descriptions-item>
  30.         <a-descriptions-item label="Effective Time">
  31.           2017-10-10
  32.         </a-descriptions-item>
  33.         <a-descriptions-item label="Remarks">
  34.           Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
  35.         </a-descriptions-item>
  36.       </a-descriptions>
  37.     </a-page-header>
  38.   </div>
  39. </template>
  40. <style>
  41. tr:last-child td {
  42.   padding-bottom: 0;
  43. }
  44. </style>

API

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

事件

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