SuperAPI AI 工具集

add-navigation

前端与建站

查看项目

更新于 10-15 20:13

技能介绍

用途:把 Navigation 组件接入 Dune 应用,生成粘性导航页头,包含随明暗主题自适应的默认 Cognite 标志和主题切换按钮(若应用已有暗色模式钩子)。

主要能力:组件完全受控,父级通过 activeId 与 onNavigate 管理状态,内部不假设状态或路由。激活项带 aria-current="page",logo 按钮与 nav 元素带 aria-label。logo 属性可选,默认使用 Cognite 竖向标志,基于 currentColor,自动在浅色模式显示黑色、深色模式显示白色。导出 Navigation、CogniteLogo、NavItem、NavigationProps。

使用方式:先检查 package.json 是否已安装 @cognite/dune-industrial-components,未安装则运行 pnpm install "github:cognitedata/dune-industrial-components#semver:*"。阅读 src/App.tsx(或主布局文件)与 package.json,确认现有路由(如 react-router-dom)、主题钩子与页面内容位置。用类型化 NavItem[] 数组定义导航项,再接入布局:无路由时用 useState 管理 activeId;有 react-router-dom 时用 useLocation 派生 activeId、用 useNavigate 处理跳转。若应用支持暗色模式,可用现有钩子渲染主题切换按钮。仅在需要时通过 logo 属性传入自定义标志,并根据主题切换图片。

适用场景:Dune 应用中添加导航页头或顶部导航栏。

限制:资料未说明该组件在其他框架或非 Dune 项目中的适用性;导航项来源、具体样式与更多配置暂未提供。