Header
简介
Header 组件用于网站顶部导航，提供 logo、导航菜单、主题切换与多语言能力。
案例
Props
background
自定义 Header 的背景色。
---
import { Header } from "@coffic/cosy-ui";
---
<Header background="primary" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header background="secondary" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header background="accent" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header background="base-100" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header background="primary/50" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header background="base-300/80" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header background="transparent" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header background="none" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header background="none" shadow="none" sticky={false} />
height
控制 Header 高度。
navPosition
导航区域位置。
---
import { Header, type INavItem } from "@coffic/cosy-ui";
const navItems: INavItem[] = [
{ href: "/docs", title: "Docs" },
{ href: "/components", title: "Components" },
{ href: "/examples", title: "Examples" },
];
---
<Header navPosition="start" navItems={navItems} sticky={false} />
---
import { Header, type INavItem } from "@coffic/cosy-ui";
const navItems: INavItem[] = [
{ href: "/docs", title: "Docs" },
{ href: "/components", title: "Components" },
{ href: "/examples", title: "Examples" },
];
---
<Header navPosition="center" navItems={navItems} sticky={false} />
---
import { Header, type INavItem } from "@coffic/cosy-ui";
const navItems: INavItem[] = [
{ href: "/docs", title: "Docs" },
{ href: "/components", title: "Components" },
{ href: "/examples", title: "Examples" },
];
---
<Header navPosition="end" navItems={navItems} sticky={false} />
shadow
控制阴影强度。
---
import { Header } from "@coffic/cosy-ui";
---
<Header shadow="none" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header shadow="sm" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header shadow="md" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header shadow="lg" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header shadow="xl" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header shadow="2xl" sticky={false} />
sticky
是否固定在页面顶部。
textColor
控制文字颜色。
---
import { Header } from "@coffic/cosy-ui";
---
<Header textColor="base-content" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header textColor="primary" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header textColor="secondary" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header textColor="accent" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header textColor="muted" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header textColor="info" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header textColor="success" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header textColor="warning" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header textColor="error" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header textColor="white" sticky={false} />
---
import { Header } from "@coffic/cosy-ui";
---
<Header textColor="black" sticky={false} />
Slots
navbar-start
放置左侧内容（如徽标、返回）。
navbar-center
放置中间内容（如主导航）。
navbar-end
放置右侧内容（如主题切换、登录）。