封面页 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	-	右侧行动按钮链接

特性

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