Header

Header 组件是一个用于网站顶部导航的布局组件，提供了logo、导航菜单、语言切换等功能。

组件支持响应式设计，在不同屏幕尺寸下有良好的显示效果，并可选择固定在页面顶部。

这里的文档仅列出了常见用法，更多用法请参考组件的源码。

基础用法

基本的 Header 组件包含 logo 和语言切换功能：

带导航菜单

通过 navItems 属性添加导航菜单项：

自定义高度

使用 height 属性可以设置导航栏的高度，支持七种预设大小：

<Header 
logo={{ src: getExampleImage({ width: 100, height: 100, provider: "robohash", randomSeed: "cosy" }) }}
logoHref="/"
height="sm"
/>

不同高度对比：

3xs: 微小尺寸 (16px) - 适合极简界面或内嵌组件
2xs: 超小尺寸 (24px) - 适合紧凑型工具栏
xs: 特小尺寸 (32px) - 适合辅助导航栏
sm: 小尺寸 (40px) - 适合轻量级工具类网站
md: 中等尺寸 (48px，默认) - 适合大多数应用
lg: 大尺寸 (64px) - 适合内容中心的网站
xl: 超大尺寸 (80px) - 适合品牌展示型网站

高度设置会自动调整 logo 大小和页面顶部的占位空间（当 sticky 为 true 时）。

自定义语言选项

自定义语言切换下拉菜单中的选项：

<Header 
logo={{ src: getExampleImage({ width: 100, height: 100, provider: "picsum", blur: 2 }) }}
logoHref="/"
languages={["zh-cn", "en"]}
currentLocale="zh-cn"
/>

固定在顶部

使用 sticky 属性可以使导航栏固定在页面顶部：

<Header 
logo={{ src: "https://via.placeholder.com/100", width: 100, height: 100, format: "png" }}
logoHref="/"
sticky={true}
/>

自定义导航栏内容

Header组件提供了三个插槽用于自定义导航栏的不同部分：

navbar-start: 自定义导航栏左侧内容
navbar-center: 自定义导航栏中间内容
navbar-end: 自定义导航栏右侧内容（默认显示语言切换器）

以下是自定义各部分内容的示例：

自定义左侧内容

可以在logo旁边添加自定义内容：

<Header logoHref={logo} rounded="lg" sticky={false}>
  <div
    slot="navbar-start"
    class="cosy:flex cosy:items-center cosy:gap-2 cosy:ml-2">
    <button class="cosy:btn cosy:btn-sm cosy:btn-primary">联系我们</button>
    <span class="cosy:badge cosy:badge-outline">在线咨询</span>
  </div>
</Header>

自定义中间内容

可以替换或增强默认的导航菜单：

<Header logoHref={logo} rounded="lg" sticky={false}>
  <div slot="navbar-center" class="cosy:flex cosy:items-center cosy:gap-4">
    <span class="cosy:badge cosy:badge-accent">新功能</span>
    <div class="cosy:divider cosy:divider-horizontal"></div>
    <span class="cosy:badge cosy:badge-secondary">热门</span>
    <div class="cosy:divider cosy:divider-horizontal"></div>
    <span class="cosy:badge">推荐</span>
  </div>
</Header>

自定义右侧内容

<Header logoHref={logo} rounded="lg" sticky={false}>
  <div slot="navbar-end" class="cosy:flex cosy:items-center cosy:gap-2">
    <button class="cosy:btn cosy:btn-sm cosy:btn-ghost">登录</button>
    <button class="cosy:btn cosy:btn-sm cosy:btn-primary">注册</button>
  </div>
</Header>