# @dloizides/ui-nav 中文文档 规范地址：https://npmcn.com/package/%40dloizides/ui-nav/ 版本：1\.38\.1 npm 元数据更新时间：2026-11-10T18:40:34.481Z 中文译文更新时间：2026-11-12T12:49:00.682Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40dloizides/ui-nav 原文对照：https://npmcn.com/package/%40dloizides/ui-nav/?lang=original 项目主页：https://github.com/openmindednewby/ui-nav#readme 源码仓库：https://github.com/openmindednewby/ui-nav ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.1 MB，11 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=18\.0\.0 - 运行依赖：2 个 - peer 依赖：react \>=18\.0\.0，react-native \>=0\.74\.0，@dloizides/auth-web \>=1\.5\.0，@dloizides/ui-layout \>=1\.41\.0，@dloizides/ui-feedback \>=1\.2\.0 - 首次发布：2026-07-09T10:24:27.425Z - 最新版本发布：2026-11-10T18:40:34.321Z - 近 30 天下载量：3561（2026-10-13 至 2026-11-11，npm 官方下载统计） - 已发布版本数：48（近 12 个月 48 个） ## 中文简介 由Cifig驱动,品牌不可知的回放原生(RN-web)导航外壳——Sidebar + Topbar 从字节-等同erevna-web/katalogos-web nav双胞胎推广. 制作一个调用用户提供的导航项目\[\](本地化前的标签、图标渲染槽),路由颜色 ## 安装 ```sh npm install @dloizides/ui-nav ``` 也可以使用：`pnpm add @dloizides/ui-nav`、`yarn add @dloizides/ui-nav`、`bun add @dloizides/ui-nav` ## README # 校对:soup 由配置驱动、品牌不可知的土著反应(RN-web) **导航外壳** 联 合 国 dloizides.com 组合: `Sidebar` + 键 `Topbar`,从同名字节升级 erevna-web / katalogos-web 导航双胞胎. 这个 _铬_ 共享 _项目数据_ 留下来 您的应用程序 - 组件使呼叫器提供 `NavItem[]` (标签已经本地化, 图标作为渲染槽),并通过共享 `@dloizides/ui-feedback` UiProvider主题 :. ## 安装 ```bash npm install @dloizides/ui-nav @dloizides/ui-feedback @dloizides/auth-web ``` 端点 : `@dloizides/ui-feedback >= 1.2.0`, (中文(简体) ), `@dloizides/auth-web >= 1.5.0`, (中文(简体) ), `react >= 18`, (中文(简体) ), `react-native >= 0.74` (使用时 `react-native-web` ) (中文(简体) ). ## 使用量 ```tsx import { Sidebar, Topbar, accessibleNavItems, type NavItem } from '@dloizides/ui-nav'; const items: NavItem[] = buildItems(); // your role-filtered / grouped items router.push(route)} title={FM('menu.title')} regionLabel={FM('accessibility.navigationRegion')} navigateHint={(label) => FM('menu.navigateToHint', label)} expandHint={FM('menu.expandSection')} collapseHint={FM('menu.collapseSection')} renderChevron={(open, color, size) => } header={} footer={<>} /> } language={{ label: FM(`topbar.lang.${locale}`), hint: FM('topbar.langHint'), onPress: toggleLocale }} notificationSlot={} user={{ name: displayName, email }} logout={{ label: FM('topbar.logout'), hint: FM('topbar.logoutHint'), onPress: logout, testID: 'logout-button' }} /> ``` ### 水平上栏( E)`NavBar`(中文(简体) ) 首选导航链接 **顶端** (横向菜单栏) 而不是左侧的栏杆? `NavBar` 使同样的 `NavItem[]` 模式横向——左边的品牌插槽, 内置链接,一个自由形式的右槽(自动 / 用户 / 登录) —— 并崩溃 在可配置断点下方的汉堡包后面链接( 默认) `760`匹配 v1 AML 控制台 `.global-nav`) (中文(简体) ). 纯粹是添加剂; `Sidebar` 不变. ```tsx import { NavBar, type NavItem } from '@dloizides/ui-nav'; router.push(route)} regionLabel={FM('accessibility.navigationRegion')} navigateHint={(label) => FM('menu.navigateToHint', label)} brand={} // left slot right={} // right slot (auth / user / logout) menuLabel={FM('menu.toggle')} // a11y label for the hamburger menuHint={FM('menu.toggleHint')} collapseBelow={760} // hamburger under this viewport width overflowLabel={FM('menu.more')} // "More ▾" priority+ trigger label overflowHint={FM('menu.moreHint')} /> ``` **优先级+溢出("..."菜单).** 上层 `collapseBelow` 链接坐在一个 非包装行。 当它们不都合身时,一个度量衡的传球就保留了领先的物品 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}它与内线相接 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}其他的则会倒塌 **"再来点"** 触发——共享 `@dloizides/ui-layout` `ModalDropdown` 因此,任何物品都不能被切断;盈余 移动到一个可传送的键盘导航下拉。 如果活动路线位于 溢出装置, 触发器佩戴口音药丸 这样它仍然可以到达。 本地化 带有可选键的触发器 `overflowLabel` (可见 + 可访问,默认) `"More"`(中文(简体) ) 财务报告和审定财务报表 `overflowHint`下图 `collapseBelow` 整个片段仍然倒塌 反应灵敏的汉堡抽屉, 所以两种机制从来没有重叠. ### 一个部分,两个方向(`Nav`(中文(简体) ) `Nav` 或使水平 `NavBar` 垂直键 `Sidebar` 从同 `NavItem[]`,由单个 `orientation` 道具 — 在上行和侧面之间翻转 铁路不交换部件或再推道具. `orientation` 默认为 `"horizontal"`剩下的道具是 代表道具的歧视结合 (TypeScript每个方向执行正确的设定——例如. `title` 只有垂直, `collapseBelow` 编号 : `overflowLabel` 仅限横向). ```tsx import { Nav, type NavItem } from '@dloizides/ui-nav';