封面页 Header

概览

Header (BlockHeader) 是页面的顶层核心组件，通常作为 Hero Section 使用。它集成了大标题、描述文案、行动按钮以及媒体预览（图片或视频）。

实时预览

构建业务的未来

通过我们的一站式 CMS 解决方案，让内容创作变得前所未有的简单。全球 500 强公司的共同选择。

使用方法

import { Header } from '@goenhance/cms-ui';

const Example = () => (
  <Header
    logo="/logo.png"
    menuList={[
      { text: "产品", url: "/products" },
      { text: "文档", url: "/docs" }
    ]}
    buttonText="登录"
    buttonUrl="/login"
  />
);

属性说明 (Props)

属性	类型	默认值	说明
`logo`	`string`	-	Logo 图片的 URL
`menuList`	`Array<{ text: string, url: string }>`	`[]`	导航菜单列表
`buttonText`	`string`	-	右侧行动按钮文字
`buttonUrl`	`string`	-	右侧行动按钮链接

特性

粘性定位：支持在页面滚动时悬浮在顶部。
响应式菜单：在移动端自动转换为汉堡菜单。
高度定制：可结合主题变量调整颜色和高度。

主题覆盖

可覆盖变量

主容器 — 类名：mewx-cms-header

变量名	用途	默认值
`--mewx-cms-header-bg`	背景色	`var(--blocks-bg-page)`
`--mewx-cms-header-text`	标题文字色	`var(--blocks-text-heading)`
`--mewx-cms-header-body-text`	正文文字色	`var(--blocks-text-body)`
`--mewx-cms-header-highlight-text`	高亮文字色	`var(--blocks-primary-dark)`
`--mewx-cms-header-border`	边框色	`var(--blocks-border)`
`--mewx-cms-header-height`	高度	`4rem`
`--mewx-cms-header-padding-x`	水平内边距	`1.5rem`
`--mewx-cms-header-shadow`	阴影	`var(--blocks-shadow-sm)`
`--mewx-cms-header-cta-bg`	CTA 按钮背景	`var(--blocks-gradient-primary)`
`--mewx-cms-header-cta-text`	CTA 按钮文字色	`255 255 255`
`--mewx-cms-header-cta-shadow`	CTA 按钮阴影	`var(--blocks-shadow-button)`
`--mewx-cms-header-tip-icon-bg`	提示图标背景	`var(--blocks-primary)`
`--mewx-cms-header-tip-icon-text`	提示图标文字色	`255 255 255`
`--mewx-cms-header-media-bg`	媒体区背景	`var(--blocks-bg-card)`

Logo 区域 — 类名：mewx-cms-header-logo

变量名	用途	默认值
`--mewx-cms-header-logo-text`	Logo 文字色	`var(--blocks-primary)`
`--mewx-cms-header-logo-font-size`	Logo 字体大小	`1.25rem`
`--mewx-cms-header-logo-font-weight`	Logo 字重	`700`

导航区域 — 类名：mewx-cms-header-nav

变量名	用途	默认值
`--mewx-cms-header-nav-text`	导航文字色	`var(--blocks-text-body)`
`--mewx-cms-header-nav-hover-text`	导航悬停色	`var(--blocks-primary)`
`--mewx-cms-header-nav-active-text`	导航激活色	`var(--blocks-primary)`
`--mewx-cms-header-nav-font-size`	导航字体大小	`0.875rem`

覆盖示例

/* 暗色头部 */
.dark-header {
  --mewx-cms-header-bg: 15 23 42;
  --mewx-cms-header-text: 255 255 255;
  --mewx-cms-header-body-text: 203 213 225;
  --mewx-cms-header-border: 51 65 85;
  --mewx-cms-header-nav-text: 203 213 225;
}

<Header className="dark-header" logo="/logo.png" menuList={[...]} buttonText="登录" buttonUrl="/login" />