PageHeader 页头

页头位于页容器顶部，用于展示页面标题、面包屑导航以及操作区。Title 标题组件适用于卡片标题等轻量标题场景。

基础用法

设置 title 和 subtitle 显示页头信息。

带返回按钮

设置 backArrow 显示返回按钮，点击触发 back 事件。

带图标

设置 icon 属性展示图标。

带面包屑

设置 breadcrumb 显示面包屑导航。

自定义额外区域

通过 extra 插槽添加操作按钮。

带内容区与底部

通过 default 和 footer 插槽添加更多内容。

Title 标题

轻量标题组件，适用于卡片标题、区块标题等场景。支持图标、副标题、右侧额外区域。

基础用法

设置 text 属性显示标题文字，level 控制层级大小。

大标题

次标题

小标题

四级标题

带副标题

设置 sub 属性在标题右侧显示补充说明。

项目进度2026 年度

用户管理共 128 人

带图标

设置 icon 属性在标题前显示图标。

通知中心

数据统计

额外区域

通过 extra 插槽在标题右侧添加操作按钮等内容。

团队成员

卡片标题场景

Title 组件最常见的场景：作为 Card 或区块的标题头部。

订单内容区域…

下划线与斜体

设置 underline 显示下划线，italic 显示斜体。

重点强调

备注说明

尺寸

设置 size 控制标题大小，sm/md/lg 对应 13px/14px/16px。

小尺寸

中尺寸

大尺寸

PageHeader Props

参数	类型	默认值	说明
`title`	`string`	`—`	页面标题（必填）
`subtitle`	`string`	`—`	副标题
`icon`	`string`	`—`	标题前的图标名
`backArrow`	`boolean`	`false`	是否显示返回按钮
`breadcrumb`	`BreadcrumbItem[]`	`—`	面包屑数据

PageHeader Events

事件名	类型	说明
`back`	`() => void`	点击返回按钮时触发

PageHeader Slots

插槽名	说明
`icon`	自定义图标区域
`breadcrumb`	自定义面包屑区域
`extra`	操作区内容
`default`	主内容区
`footer`	底部区域

Title Props

参数	类型	默认值	说明
`text`	`string`	`—`	标题文字
`level`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	`'h3'`	标题层级，控制文字大小
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	标题尺寸，sm=13px / md=14px / lg=16px
`sub`	`string`	`—`	副标题文字，显示在标题右侧
`icon`	`string`	`—`	标题前的图标名
`bold`	`boolean`	`true`	是否加粗
`underline`	`boolean`	`false`	是否显示下划线
`italic`	`boolean`	`false`	是否斜体
`disabled`	`boolean`	`false`	是否禁用状态（灰色文字）

Title Slots

插槽名	说明
`default`	标题文字内容（替代 text 属性）
`icon`	自定义图标区域
`sub`	自定义副标题区域
`extra`	右侧额外区域（如操作按钮、标签等）