PageHeader 页头
返回并交代页面上下文。帮助用户理解位置并移动到目标内容。
实时示例
返回工单
WO-1048 · 知识库同步异常
Vue 示例
<el-page-header />使用规则
当前项、可访问项和禁用项必须有清晰区别,不承载与导航无关的复杂操作。
不要通过局部硬编码改变品牌色、圆角或状态语义;不要隐藏必要的操作反馈。
状态与变体
- 默认、悬停、聚焦、按下和禁用状态必须保持可辨识。
- 加载、空、错误状态按业务影响选用,不用品牌强调色表达错误。
- 紧凑尺寸只用于高密度后台场景,触控目标仍应满足可操作要求。
基础用法
<el-page-header>页头</el-page-header>设计变量
color.interactive.primarycolor.background.subtlespacing.smradius.sm无障碍
当前页面使用 aria-current;支持键盘导航;焦点不能被固定元素遮挡。