PageHeader 页头
标题 + 描述 + 面包屑 + 操作区 + 工具栏 + 标签页一体的页头容器。
基础用法
PageHeader 是一个组合容器，把整页头部常用的几块（面包屑、标题、描述、操作）放进固定布局里。title / description 是简便属性；如果要放复杂内容，用同名 slot 覆盖。
<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><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 贴到底部边线）。
<CfPageHeader>
<template #title>
chufix
<CfTag tone="primary" variant="solid" size="sm">v0.0.1</CfTag>
</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" :items="items" />
</template>
</CfPageHeader><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（落地页强调）。
<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} 去掉默认的底部分隔线，让页头紧贴页面背景或后续卡片。
<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 页头 的讨论