@avament-pub/navbar-ui

自成一体 Avament 导航 用于 react / Next.js apps - 否 @/ 进口,没有商店,没有API电话。 主机提供标签,路线,项目数据和主题CSS.

目录

1. 安装
2. 快开始
3. 布局结构
4. 地物标志
5. 项目拾取模式
6. 标记
7. 天气
8. 朗/ 主题
9. 主机约束清单
10. 主机插槽
11. 拉特
12. 主题 / CSS
13. 出口

1. 安装

npm install @avament-pub/navbar-ui

yarn add @avament-pub/navbar-ui
pnpm add @avament-pub/navbar-ui

所需资源

• 反应 18+ / 反应 DOM 18+
• Next.js App路由器中的客户端组件("use client" 包含在捆绑中)

可选( Next.js App 路由器) :

transpilePackages: ["@avament-pub/navbar-ui"];

2. 快速启动

import { Navbar } from "@avament-pub/navbar-ui";
import Link from "next/link";

<Navbar
  pathname={pathname}
  dir="ltr"
  labels={{ selectAProject: "Select a project", /* … */ }}
  routes={{
    home: "https://avament.com/home",
    settings: "/settings",
    support: "https://support.avament.com",
  }}
  logo={{ src: "/logos/main.svg", href: "https://avament.com/home" }}
  projectPicker={{
    mode: "interactive",
    selectedProjectId,
    selectedProjectName,
    projects,
    onSelect: handleProjectSelect,
  }}
  LinkComponent={Link}
/>

3. 布局结构

主要场地和分场地共享 一个条形结构. 软件包拥有放置——只接收有线道具.

桌面( 固定顺序) :

天气让 居中 在栏(桌面) features.weather 在主家布局上启用.

导航动作 取决于 layout +页:

可选项目选择器 (左组,取取取者前:

1. moduleLabel ——避孕药标签(如:. "AVAMENT-Intern"(中文(简体) )
2. context - 外部/内部分块控制
3. projectPickerLeadingSlot 任何自定义用户界面

// Main website (home)
<Navbar
  pathname="/home"
  isHomeLayout
  features={{ weather: true, support: true }}
  projectPicker={{ mode: "interactive", … }}
  weather={forecast}
  logo={logo}
  /* … */
/>

// Sub-site (ticket, check, …)
<Navbar
  layout="submodule"
  pathname={pathname}
  moduleLabel="AVAMENT-Intern"
  context={{
    value: visibility,
    onChange: setVisibility,
    options: [
      { value: "external", label: "External" },
      { value: "internal", label: "Internal" },
    ],
  }}
  projectPicker={{ mode: "interactive", … }}
  features={{ langTheme: true }}
  langTheme={{ language, onLanguageChange, theme, onThemeChange, isDarkMode }}
  trailingSlot={<CreateTicketButton />}
  onBack={() => {
    if (pathname === "/") window.location.href = routes.landing ?? "https://avament.com";
    else router.back();
  }}
  /* …labels, routes, logo, LinkComponent */
/>

trailingSlot数字 : 标识前只应用动作(创建批次,创建票).

使用 contextSlot 或者说 projectPickerLeadingSlot 仅当内置选项不够时.

4. 地物标志

5. 项目取取器模式

projectPicker={{
  mode: "readonly",
  selectedProjectId: "uuid",
  selectedProjectName: "Project Alpha",
}}

6. 标识

静态 :

logo={{ src: "/logos/check.svg", href: "https://check.avament.com", alt: "Check" }}

动态 :

logo={{
  resolve: ({ pathname }) => ({
    src: pathname.startsWith("/check") ? "/logos/check.svg" : "/logos/main.svg",
    href: pathname === "/home" ? "https://avament.com/landing" : "https://avament.com/home",
  }),
}}

7. 天气

主机获取数据; UI 只制作 :

features={{ weather: true }}
weather={{
  days: forecast.days,
  locationLabel: forecast.locationLabel,
  timezone: forecast.timezone,
  locale: "de",
}}

8. 朗/主题

受控拾取器——主机持续变化:

features={{ langTheme: true }}
langTheme={{
  language: "de",
  onLanguageChange: (lang) => updateSettings({ language: lang }),
  theme: "dark",
  onThemeChange: (theme) => updateSettings({ theme }),
  isDarkMode: true,
}}

9. 主机约束清单

1. 过 labels 从您的 i18n (t() • 目标)。 见 REQUIRED_NAVBAR_LABEL_KEYS 编号 : OPTIONAL_NAVBAR_LABEL_KEYS 出口.
2. 线 projectPicker.onSelect 您的认证/ 工程切换流 .
3. 过 navigationBlocked 当未保存/进口/编辑的警卫活动时.
4. 提供 LinkComponent (续) Link)或使用 onNavigate 还有你的路由器.
5. 执行 onBack 对后扣行为.
6. 包含主题 CSS( 见 主题 / CSS) (中文(简体) ).

10. 主机档

11. 拉特里语

过 dir="rtl" 当应用语言是阿拉伯语(或任何RTL语言)时:

<Navbar dir={locale === "ar" ? "rtl" : "ltr"} /* … */ />

软件包自动映射了栏:

• 左组 (动作+取出项目) 视觉 对
• 右组 (朗语/主题+标志) 视觉 左边
• 天气 保持中心状态
• 降水量与触发器一致 内置启动 边缘
• 在 RTL 中后箭头图标翻转

项目拾取器文本和菜单继承 dir 从导航站。 天气温度不变 dir="ltr" 数字可读性.

12. 主题/CSS

此软件包使用 提供 Tailwind 主题公用事业。您的应用程序必须定义 :

• bg-theme, (中文(简体) ), border-theme, (中文(简体) ), surface-theme, (中文(简体) ), text-theme-primary
• hover:bg-input-theme, (中文(简体) ), bg-theme-surface, (中文(简体) ), border-theme-border
• --input-border-color CSS 变量
• animate-project-picker-pulse 键框动画
• shadow-glass, (中文(简体) ), shadow-glass-dark (可选,指降水/人流)

没有这些类,导航器会变形 但看起来没有风格.

支持创建对话框 (单位:千美元)features.supportCreate: 主题 CSS 导入自 @avament-pub/navbar-ui。可选的手动导入 : @avament-pub/navbar-ui/styles.css。主机应用程序应当定义 --surface-color, (中文(简体) ), --text-primary-color, (中文(简体) ), --input-border-color,以及相关的令牌(见协议/ticket应用).

13. 出口

// Components
export { Navbar, NavDropdown, WeatherForecastWidget, ProjectPicker, LangPicker, ThemePicker, NavbarSegmentedControl };

// Constants
export { NAV_ICON_SIZE, navIconButtonClass, navIconButtonClassNoMargin, DEFAULT_LANGUAGE_OPTIONS };
export { REQUIRED_NAVBAR_LABEL_KEYS, OPTIONAL_NAVBAR_LABEL_KEYS };

// Types
export type {
  NavbarProps,
  NavbarLayout,
  NavbarContextControl,
  NavbarContextOption,
  NavbarFeatures,
  NavbarRoutes,
  NavbarLabels,
  NavbarLogoConfig,
  NavbarProject,
  NavbarProjectPicker,
  NavbarWeather,
  NavbarWeatherDay,
  NavbarLangTheme,
  NavbarTheme,
  NavbarLinkComponent,
  ProjectPickerMode,
};