标题组件

亮色

暗色

Header 组件在网页应用中充当主要的导航和交互页眉。它集成了主题切换、导航标签页，以及可选的 Neo4j 数据库连接功能。

在线预览链接

组件代码链接

先决条件

确保在项目中已安装 @neo4j-ndl 库，以便使用此 Header 组件。
还请导入 User.tsx，因为它用于显示用户资料。

使用

在应用中使用 Header 组件，请按以下步骤操作

导入组件

import Header from './path/to/Header';

Optional 定义导航项以及用于管理活动导航项和 Neo4j 连接状态的状态逻辑

const navItems = ['Home', 'About', 'Contact'];
const [activeNavItem, setActiveNavItem] = useState(navItems[0]);
const [connectNeo4j, setConnectNeo4j] = useState(false);
const [isConnectionModalOpen, setIsConnectionModalOpen] = useState(false);

使用必要的 props 渲染 Header 组件

//
<Header
  title="My Application"
  navItems={navItems}
  activeNavItem={activeNavItem}
  setActiveNavItem={setActiveNavItem}
  useNeo4jConnect={true}
  connectNeo4j={connectNeo4j}
  setConnectNeo4j={setConnectNeo4j}
  openConnectionModal={() => setIsConnectionModalOpen(true)}
  userHeader={true}
/>

组件属性 (Props)

Header 组件接受多个 props，用于自定义和实现功能

名称描述必填

名称	描述	必填
`标题`	应用的标题/名称，将显示在页眉中。	是
`navItems`	导航项的列表。	否
`activeNavItem`	当前活动/选中的导航项。	否
`setActiveNavItem`	设置活动导航项的函数。	否
`useNeo4jConnect`	布尔值，用于启用或禁用 Neo4j 连接功能。	否
`connectNeo4j`	如果 `useNeo4jConnect` 为 true——指示当前是否已连接到 Neo4j 数据库的布尔值。	否
`setConnectNeo4j`	如果 `useNeo4jConnect` 为 true——用于更新 Neo4j 连接状态的函数。	否
`openConnectionModal`	如果 `useNeo4jConnect` 为 true——用于打开 Neo4j 连接模态框的函数。	否
`userHeader`	布尔值，用于在页眉中显示或隐藏用户区域。	否

标题

应用的标题/名称，将显示在页眉中。

是

navItems

导航项的列表。

否

activeNavItem

当前活动/选中的导航项。

否

setActiveNavItem

设置活动导航项的函数。

否

useNeo4jConnect

布尔值，用于启用或禁用 Neo4j 连接功能。

否

connectNeo4j

如果 useNeo4jConnect 为 true——指示当前是否已连接到 Neo4j 数据库的布尔值。

否

setConnectNeo4j

如果 useNeo4jConnect 为 true——用于更新 Neo4j 连接状态的函数。

否

openConnectionModal

如果 useNeo4jConnect 为 true——用于打开 Neo4j 连接模态框的函数。

否

userHeader

布尔值，用于在页眉中显示或隐藏用户区域。

否

关键组件

主题切换

页眉包含主题切换开关，允许用户在浅色和深色模式之间切换。它使用 ThemeWrapperContext 来访问并修改整个应用的主题状态。

const themeUtils = React.useContext(ThemeWrapperContext);
const [themeMode, setThemeMode] = useState<string>(themeUtils.colorMode);

const toggleColorMode = () => {
  setThemeMode((prevThemeMode) => {
    return prevThemeMode === 'light' ? 'dark' : 'light';
  });
  themeUtils.toggleColorMode();
};

// ...

<IconButton aria-label='Toggle Dark mode' clean size='large' onClick={toggleColorMode}>
  {themeMode === 'dark' ? (
    <span role='img' aria-label='sun'>
      <SunIconOutline />
    </span>
  ) : (
    <span role='img' aria-label='moon'>
      <MoonIconOutline />
    </span>
  )}
</IconButton>

导航标签页

导航使用来自 @neo4j-ndl/react 的 Tabs 组件实现，每个 navItem 渲染为一个标签页。活动的导航项会被高亮显示，切换标签页会相应地更新应用的状态。

<section className='flex w-1/3 shrink-0 grow-0 justify-center items-center mb-[-26px]'>
  <Tabs size='large' fill='underline' onChange={(e) => setActiveNavItem(e)} value={activeNavItem}>
    {navItems.map((item) => (
      <Tabs.Tab tabId={item} key={item}>
        {item}
      </Tabs.Tab>
    ))}
  </Tabs>
</section>

Neo4j 连接

如果 useNeo4jConnect 为 true，则使用 Switch 组件来控制与 Neo4j 数据库的连接。切换该开关可以触发用于连接数据库的模态框，该模态框由 openConnectionModal prop 函数管理。

{useNeo4jConnect ? (
<Switch
  checked={connectNeo4j}
  onChange={(e) => {
    if (e.target.checked) {
      openConnectionModal();
    } else {
      setConnectNeo4j(false);
    }
  }}
  disabled={false}
  fluid={true}
  label={`Connect${connectNeo4j ? 'ed' : ''} to Neo4j`}
  labelBefore={true}
/>
) : null}

用户区块

可以包含可选的用户区块；当 userHeader 为 true 时会渲染 User 组件。此区块用于显示与用户相关的操作或信息，例如登录状态或用户设置。

{userHeader ? (
  <div className='hidden md:inline-block'>
    <User />
  </div>
) : null}