头部组件

明亮 暗黑
DesktopHeaderLight
DesktopHeaderDark

Header 组件是 Web 应用程序中主要的导航和交互头部。它集成了主题切换、导航标签页和可选的 Neo4j 数据库连接功能。

链接到实时预览

链接到组件代码

先决条件

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

  • 确保您也导入 User.tsx，因为它用于显示用户个人资料。

用法

要在您的应用程序中使用 Header 组件，请按照以下步骤操作：

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

组件属性

Header 组件接受多个属性用于自定义和功能设置

名称 描述 必填

title

您的应用程序的标题/名称，将显示在头部。

是

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}
© . All rights reserved.