页头 page-header

导航组件。三层同源：无头内核给出解剖与状态机，Vue 组件与自定义元素只是它的两层外壳，行为完全一致。

示例

基础用法

除了 root，返回位、副标题、操作、页脚都可选；只写用得上的那几段

订单详情

编号 SO-20260731-004

<script setup lang="ts">
import { XhPageHeaderRoot, XhPageHeaderSubtitle, XhPageHeaderTitle } from "@xihan-ui/vue";
</script>

<template>
  <XhPageHeaderRoot>
    <XhPageHeaderTitle>订单详情</XhPageHeaderTitle>
    <XhPageHeaderSubtitle>编号 SO-20260731-004</XhPageHeaderSubtitle>
  </XhPageHeaderRoot>
</template>

返回位

返回位就是作者自己的按钮：组件只给身份与位置，type、可及名字与点击行为自己写

订单详情

已点返回 0 次

<script setup lang="ts">
import { ref } from "vue";
import {
  XhPageHeaderBackTrigger,
  XhPageHeaderRoot,
  XhPageHeaderSubtitle,
  XhPageHeaderTitle,
} from "@xihan-ui/vue";

const times = ref(0);
</script>

<template>
  <XhPageHeaderRoot>
    <XhPageHeaderBackTrigger type="button" aria-label="返回上一页" @click="times++">
      ←
    </XhPageHeaderBackTrigger>
    <XhPageHeaderTitle>订单详情</XhPageHeaderTitle>
    <XhPageHeaderSubtitle>已点返回 {{ times }} 次</XhPageHeaderSubtitle>
  </XhPageHeaderRoot>
</template>

行尾操作

extra 贴在整行的末尾，里面放什么按钮由作者决定

订单详情

编号 SO-20260731-004

<script setup lang="ts">
import {
  XhPageHeaderExtra,
  XhPageHeaderRoot,
  XhPageHeaderSubtitle,
  XhPageHeaderTitle,
} from "@xihan-ui/vue";
</script>

<template>
  <XhPageHeaderRoot>
    <XhPageHeaderTitle>订单详情</XhPageHeaderTitle>
    <XhPageHeaderSubtitle>编号 SO-20260731-004</XhPageHeaderSubtitle>
    <XhPageHeaderExtra>
      <button type="button">导出</button>
      <button type="button">打印</button>
    </XhPageHeaderExtra>
  </XhPageHeaderRoot>
</template>

尺寸

size 换的是标题字号与整块的上下留白，不传 size 即默认档

小档标题

副标题跟着标题排在同一行

默认档标题

副标题跟着标题排在同一行

大档标题

副标题跟着标题排在同一行

<script setup lang="ts">
import { XhPageHeaderRoot, XhPageHeaderSubtitle, XhPageHeaderTitle } from "@xihan-ui/vue";

// 中间一档不写 size，用 undefined 表达
const sizes = [
  { size: "sm", label: "小" },
  { size: undefined, label: "默认" },
  { size: "lg", label: "大" },
] as const;
</script>

<template>
  <div style="display: flex; flex-direction: column">
    <XhPageHeaderRoot v-for="s in sizes" :key="s.label" :size="s.size" bordered>
      <XhPageHeaderTitle>{{ s.label }}档标题</XhPageHeaderTitle>
      <XhPageHeaderSubtitle>副标题跟着标题排在同一行</XhPageHeaderSubtitle>
    </XhPageHeaderRoot>
  </div>
</template>

分隔线与页脚

bordered 在底部画一条线，footer 整行另起，装描述或一组摘要

七月账单

账期 7 月 1 日至 7 月 31 日，共 128 笔，合计 3,240.00 元。

<script setup lang="ts">
import {
  XhPageHeaderExtra,
  XhPageHeaderFooter,
  XhPageHeaderRoot,
  XhPageHeaderTitle,
} from "@xihan-ui/vue";
</script>

<template>
  <XhPageHeaderRoot bordered>
    <XhPageHeaderTitle>七月账单</XhPageHeaderTitle>
    <XhPageHeaderExtra>
      <button type="button">去支付</button>
    </XhPageHeaderExtra>
    <XhPageHeaderFooter>账期 7 月 1 日至 7 月 31 日，共 128 笔，合计 3,240.00 元。</XhPageHeaderFooter>
  </XhPageHeaderRoot>
</template>

产物

层	值
自定义元素	<xh-page-header>
Vue 组件	XhPageHeaderBackTrigger XhPageHeaderExtra XhPageHeaderFooter XhPageHeaderRoot XhPageHeaderSubtitle XhPageHeaderTitle
状态机	无，connect 直接由 props 算属性
皮肤	@xihan-ui/styles/page-header.css

解剖

部件名即 data-part 属性值，也是皮肤的选择器。加粗的是必备部件，不渲染它组件不工作（Web Components 适配器会在诊断通道上报 wc.missing-part）。

data-scope="page-header"：root · back-trigger · title · subtitle · extra · footer

Props

属性	类型	必填	说明
bordered	boolean		底部画一条分隔线，把页头与下面的内容分开。
size	Size		尺寸：sm / md / lg，决定标题字号与整块的上下留白。

connect API

connect 产出的对象。getXxxProps() 铺到对应部件的宿主元素上，其余是可读状态与操作入口。

成员	类型	说明
getRootProps	() => T['element']
getBackTriggerProps	() => T['element']
getTitleProps	() => T['element']
getSubtitleProps	() => T['element']
getExtraProps	() => T['element']
getFooterProps	() => T['element']

键盘

规格出处：W3C APG

无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。