开发预览更新于 2026-05-10

PageHeader 页头

标题 + 描述 + 面包屑 + 操作区 + 工具栏 + 标签页一体的页头容器。

基础用法

PageHeader 是一个组合容器，把整页头部常用的几块（面包屑、标题、描述、操作）放进固定布局里。title / description 是简便属性；如果要放复杂内容，用同名 slot 覆盖。

背景

<script setup lang="ts">
import { CfPageHeader, CfButton, CfBreadcrumb } from '@chufix-design/vue';
</script>

<template>
  <div style="border: 1px solid var(--line-1); border-radius: 8px; overflow: hidden;">
    <CfPageHeader
      title="项目设置"
      description="管理项目成员、权限以及通知偏好。"
    >
      <template #breadcrumb>
        <CfBreadcrumb
          :items="[
            { label: '工作台', href: '#' },
            { label: '项目', href: '#' },
            { label: '设置' },
          ]"
        />
      </template>
      <template #actions>
        <CfButton variant="tertiary">取消</CfButton>
        <CfButton variant="primary">保存</CfButton>
      </template>
    </CfPageHeader>
  </div>
</template>

<script setup>
import { CfPageHeader, CfButton, CfBreadcrumb } from '@chufix-design/vue';
</script>

<template>
  <div style="border: 1px solid var(--line-1); border-radius: 8px; overflow: hidden;">
    <CfPageHeader
      title="项目设置"
      description="管理项目成员、权限以及通知偏好。"
    >
      <template #breadcrumb>
        <CfBreadcrumb
          :items="[
            { label: '工作台', href: '#' },
            { label: '项目', href: '#' },
            { label: '设置' },
          ]"
        />
      </template>
      <template #actions>
        <CfButton variant="tertiary">取消</CfButton>
        <CfButton variant="primary">保存</CfButton>
      </template>
    </CfPageHeader>
  </div>
</template>

<CfPageHeader
title="项目设置"
description="管理项目成员、权限以及通知偏好。"
breadcrumb={
  <CfBreadcrumb items={[
    { label: '工作台', href: '#' },
    { label: '项目', href: '#' },
    { label: '设置' },
  ]} />
}
actions={
  <>
    <CfButton variant="tertiary">取消</CfButton>
    <CfButton variant="primary">保存</CfButton>
  </>
}
/>

<CfPageHeader
title="项目设置"
description="管理项目成员、权限以及通知偏好。"
breadcrumb={
  <CfBreadcrumb items={[
    { label: '工作台', href: '#' },
    { label: '项目', href: '#' },
    { label: '设置' },
  ]} />
}
actions={
  <>
    <CfButton variant="tertiary">取消</CfButton>
    <CfButton variant="primary">保存</CfButton>
  </>
}
/>

标签页 + 复杂标题

把 Tabs 直接嵌入 tabs slot / prop，会与页头无缝衔接（负 margin 把 tabs 贴到底部边线）。

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfPageHeader, CfButton, CfTabs, CfTag } from '@chufix-design/vue';

const tab = ref('overview');
</script>

<template>
  <div style="border: 1px solid var(--line-1); border-radius: 8px; overflow: hidden;">
    <CfPageHeader>
      <template #title>
        <span style="display:inline-flex; gap: 8px; align-items: center;">
          chufix
          <CfTag tone="primary" variant="solid" size="sm">v0.0.1</CfTag>
        </span>
      </template>
      <template #description>
        Vue 3 + React 双框架同源的基础组件库
      </template>
      <template #actions>
        <CfButton variant="tertiary" size="sm">分享</CfButton>
        <CfButton variant="primary" size="sm">部署</CfButton>
      </template>
      <template #tabs>
        <CfTabs
          v-model="tab"
          variant="line"
          :items="[
            { value: 'overview', label: '概览' },
            { value: 'members', label: '成员' },
            { value: 'settings', label: '设置' },
            { value: 'logs', label: '日志' },
          ]"
        />
      </template>
    </CfPageHeader>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfPageHeader, CfButton, CfTabs, CfTag } from '@chufix-design/vue';

const tab = ref('overview');
</script>

<template>
  <div style="border: 1px solid var(--line-1); border-radius: 8px; overflow: hidden;">
    <CfPageHeader>
      <template #title>
        <span style="display:inline-flex; gap: 8px; align-items: center;">
          chufix
          <CfTag tone="primary" variant="solid" size="sm">v0.0.1</CfTag>
        </span>
      </template>
      <template #description>
        Vue 3 + React 双框架同源的基础组件库
      </template>
      <template #actions>
        <CfButton variant="tertiary" size="sm">分享</CfButton>
        <CfButton variant="primary" size="sm">部署</CfButton>
      </template>
      <template #tabs>
        <CfTabs
          v-model="tab"
          variant="line"
          :items="[
            { value: 'overview', label: '概览' },
            { value: 'members', label: '成员' },
            { value: 'settings', label: '设置' },
            { value: 'logs', label: '日志' },
          ]"
        />
      </template>
    </CfPageHeader>
  </div>
</template>

<CfPageHeader
title={<>chufix <CfTag tone="primary" variant="solid" size="sm">v0.0.1</CfTag></>}
description="Vue 3 + React 双框架同源的基础组件库"
actions={<><CfButton size="sm" variant="tertiary">分享</CfButton><CfButton size="sm" variant="primary">部署</CfButton></>}
tabs={<CfTabs value={tab} items={items} onChange={setTab} />}
/>

<CfPageHeader
title={<>chufix <CfTag tone="primary" variant="solid" size="sm">v0.0.1</CfTag></>}
description="Vue 3 + React 双框架同源的基础组件库"
actions={<><CfButton size="sm" variant="tertiary">分享</CfButton><CfButton size="sm" variant="primary">部署</CfButton></>}
tabs={<CfTabs value={tab} items={items} onChange={setTab} />}
/>

三档尺寸

size 控制内距与字号 — sm（详情子页 / 弹窗内）/ md（默认）/ lg（落地页强调）。

背景

<script setup lang="ts">
import { CfPageHeader, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfPageHeader title="size = sm" description="紧凑头部，适合详情子页或弹窗内" size="sm">
      <template #actions><CfButton size="sm">操作</CfButton></template>
    </CfPageHeader>
    <CfPageHeader title="size = md" description="默认尺寸" size="md">
      <template #actions><CfButton size="sm">操作</CfButton></template>
    </CfPageHeader>
    <CfPageHeader title="size = lg" description="落地页或主页强调" size="lg">
      <template #actions><CfButton size="sm">操作</CfButton></template>
    </CfPageHeader>
  </div>
</template>

<script setup>
import { CfPageHeader, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfPageHeader title="size = sm" description="紧凑头部，适合详情子页或弹窗内" size="sm">
      <template #actions><CfButton size="sm">操作</CfButton></template>
    </CfPageHeader>
    <CfPageHeader title="size = md" description="默认尺寸" size="md">
      <template #actions><CfButton size="sm">操作</CfButton></template>
    </CfPageHeader>
    <CfPageHeader title="size = lg" description="落地页或主页强调" size="lg">
      <template #actions><CfButton size="sm">操作</CfButton></template>
    </CfPageHeader>
  </div>
</template>

<CfPageHeader title="size = sm" description="紧凑头部" size="sm" />
<CfPageHeader title="size = md" description="默认尺寸" size="md" />
<CfPageHeader title="size = lg" description="落地页强调" size="lg" />

<CfPageHeader title="size = sm" description="紧凑头部" size="sm" />
<CfPageHeader title="size = md" description="默认尺寸" size="md" />
<CfPageHeader title="size = lg" description="落地页强调" size="lg" />

无底边

bordered={false} 去掉默认的底部分隔线，让页头紧贴页面背景或后续卡片。

背景

<script setup lang="ts">
import { CfPageHeader, CfButton } from '@chufix-design/vue';
</script>

<template>
  <CfPageHeader
    title="无底边的页头"
    description="bordered=false 把底部分隔线去掉，紧贴页面背景"
    :bordered="false"
  >
    <template #actions>
      <CfButton variant="primary">保存</CfButton>
    </template>
  </CfPageHeader>
</template>

<script setup>
import { CfPageHeader, CfButton } from '@chufix-design/vue';
</script>

<template>
  <CfPageHeader
    title="无底边的页头"
    description="bordered=false 把底部分隔线去掉，紧贴页面背景"
    :bordered="false"
  >
    <template #actions>
      <CfButton variant="primary">保存</CfButton>
    </template>
  </CfPageHeader>
</template>

<CfPageHeader
title="无底边的页头"
description="bordered=false 把底部分隔线去掉"
bordered={false}
/>

<CfPageHeader
title="无底边的页头"
description="bordered=false 把底部分隔线去掉"
bordered={false}
/>

API

属性	类型	默认值	说明
`title`	`string \| ReactNode`	`—`	主标题（h1）；与 `#title` slot 二选一
`description`	`string \| ReactNode`	`—`	副描述
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	整体内距与字号
`bordered`	`boolean`	`true`	底部是否描边

Vue slot：breadcrumb / back / title / description / actions / toolbar / tabs。 React 用同名 prop 传 ReactNode。

PageHeader 页头

基础用法

项目设置

标签页 + 复杂标题

chufix v0.0.1

三档尺寸

size = sm

size = md

size = lg

无底边

无底边的页头

API

PageHeader 页头的讨论