页眉组件

亮色 暗色
DesktopHeaderLight
DesktopHeaderDark

页眉组件作为 Web 应用程序中的主要导航和交互页眉。它包含主题切换、导航选项卡以及可选的 Neo4j 数据库连接功能。

链接到实时预览

链接到组件代码

先决条件

  • 确保您在项目中安装了 @neo4j-ndl 库，以便使用此 Header 组件。

  • 还请确保您导入了 User.tsx，因为它用于显示用户配置文件。

用法

要在应用程序中使用页眉组件，请按照以下步骤操作

  1. 导入组件

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

  1. 可选 定义导航项和状态管理逻辑，用于活动导航项和 Neo4j 连接状态

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

  1. 使用所需道具渲染 Header 组件

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

组件道具

页眉组件接受多个道具，用于定制和功能

名称 描述 必需

标题

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

是

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 道具函数管理。

{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}