elementui header

以下是关于 Element UI 中 Header 组件的相关信息和用法说明：

Header 组件的基本用法

Element UI 的 Header 组件通常用于布局系统中的顶部导航栏。可以通过 el-header 标签快速创建，高度默认值为 60px，但可通过 CSS 自定义。

<el-container>
  <el-header>Header Content</el-header>
  <el-main>Main Content</el-main>
</el-container>

自定义样式

通过内联样式或类名修改背景色、高度等属性：

<el-header style="background-color: #409EFF; height: 80px;">
  Custom Header
</el-header>

结合菜单组件使用

Header 常与 el-menu 配合实现导航功能：

<el-header>
  <el-menu mode="horizontal" background-color="#545c64" text-color="#fff">
    <el-menu-item index="1">Home</el-menu-item>
    <el-menu-item index="2">About</el-menu-item>
  </el-menu>
</el-header>

响应式设计

使用 Element UI 的栅格系统实现自适应布局：

<el-header>
  <el-row type="flex" justify="space-between">
    <el-col :span="6">Logo</el-col>
    <el-col :span="12">Search Bar</el-col>
    <el-col :span="6">User Info</el-col>
  </el-row>
</el-header>

固定顶部导航

通过 CSS 实现固定定位：

.el-header {
  position: fixed;
  width: 100%;
  z-index: 1000;
}

注意事项

• 确保 el-header 作为 el-container 的直接子元素使用
• 避免在 Header 中嵌套过多复杂组件影响性能
• 移动端需考虑折叠菜单等交互设计