@caspeco/导航-核心
此软件包将安装 TypeScript 类型定义 <caspeco-navigation-menu> 网络组件 以及一些公用事业功能.
额外资源
安装
从 npm 安装软件包.
npm i @caspeco/navigation-core
使用量
正确打入道具
为了保证你通过正确的道具,你可以使用 NavigationMenuProps 类型 :
import type { NavigationMenuProps } from "@caspeco/navigation-core";
export const NavigationMenu = () => {
const navProps: NavigationMenuProps = {
currentLocation: window.location.href,
itemGroup: "Staff",
// etc ...
};
return <caspeco-navigation-menu {...navProps}></caspeco-navigation-menu>;
};
倾听事件
导航有您可能想要听的自定义事件 。 导航事件总是在身体元素上发出,并且会发泡.
import type { MobileMenuClosedEventName } from "@caspeco/navigation-core";
useEffect(() => {
const eventName: MobileMenuClosedEventName = "mobile-menu-closed";
function handleMobileMenuClosed() {
doSomething();
}
window.addEventListener(eventName, handleMobileMenuClosed);
return () => {
window.removeEventListener(eventName, handleMobileMenuClosed);
};
}, []);
语言选择
导航菜单支持语言选择,允许用户更改界面语言.
从饼干读语言
使用 getLocale 函数从 rms.locale 页面负荷上的 cookie :
import { getLocale } from "@caspeco/navigation-core";
// e.g. "en-GB", "sv-SE", "da-DK"
const currentLocale = getLocale();
听语言变化
当用户更改导航菜单中的语言时, a rms-locale-change 自定义事件在文档正文( bubling) 上发送 .
新地块包含在活动的细节中. 消费者应该聆听这一事件,并相应更新他们的语言:
import type { LocaleChangeEventName } from "@caspeco/navigation-core";
useEffect(() => {
const eventName: LocaleChangeEventName = "rms-locale-change";
function handleLocaleChanged(event: Event) {
if (!(event instanceof CustomEvent)) {
return;
}
const newLocale = event.detail.locale as string; // e.g., "en-GB", "sv-SE", "da-DK", etc.
// Update your application's language
updateApplicationLanguage(newLocale);
}
window.addEventListener(eventName, handleLocaleChanged);
return () => {
window.removeEventListener(eventName, handleLocaleChanged);
};
}, []);
设置语言
在大多数情况下,语言应该由用户通过导航菜单来改变. 如果你有很好的理由在程序上更改语言,你可以使用 setLocale 函数 :
import { setLocale } from "@caspeco/navigation-core";
// Sends a POST to the SSO API in dev to set the locale cookie, and dispatches the "rms-locale-change" event.
setLocale({ locale: "en-GB", environment: "dev" });
A. 背景情况
上下文包含了用户在上下文选择器中选择的公司(或系统!)的信息.
阅读上下文
要正确阅读 RMS 上下文, 您可以使用 getRmsContext() 函数 :
import { getRmsContext } from "@caspeco/navigation-core";
function getContextId(): string {
const { companyId, systemName } = getRmsContext();
return companyId ?? systemName;
}
设置背景
如果你需要的话,你也可以 setRmsContext(),但使用这个案例应该是罕见的。 确保设置上下文后触发页面导航(要么重新装入页面,要么重定向用户).
防止上下文变化
默认情况下,当一个用户在上下文选择器中改变上下文时,他们的选择被保存在浏览器存储中并被重定向到概览页面. 在某些情况下,你可能想把他们送到别的地方(例如Cloud App想把人送到/cloud/home),在这种情况下,你可以拦截并取消 context-selected 自定义事件 :
import { setRmsContext, type RmsContext, type ContextSelectedEventName } from "@caspeco/navigation-core";
useEffect(() => {
const eventName: ContextSelectedEventName = "context-selected";
function handleContextChanged(event: Event) {
if (!(event instanceof CustomEvent)) {
return;
}
// Cancel default behavior
event.preventDefault();
// Set the context
const newContext = event.detail as RmsContext;
setRmsContext(newContext);
// Redirect somewhere other than the Overview page
window.location.href = "rms.caspeco.se/cloud/home";
}
window.addEventListener(eventName, handleContextChanged);
return () => {
window.removeEventListener(eventName, handleContextChanged);
};
}, []);
安装 <caspeco-navigation-menu>
备选办法1:使用国家预防机制一揽子方案(试行)
参见: >=3.8.0-α.0
获取 URL 和 ID 并手动注入
import { getNavigationScriptData } from "@caspeco/navigation-core";
const { src, id } = getNavigationScriptData({ environment: "stage" });
const script = document.createElement("script");
script.id = id;
script.src = src;
script.type = "module";
document.head.appendChild(script);
获取 HTML 脚本元素并手动注入
如果在 DOM 中已经存在, 将跳过注射 .
import { getNavigationHTMLScriptElement } from "@caspeco/navigation-core";
const { scriptElement, data } = getNavigationHTMLScriptElement({ environment: "stage" });
document.head.appendChild(scriptElement);
自动注入
如果在 DOM 中已经存在, 将跳过注射 .
import { injectHTMLNavigationElement } from "@caspeco/navigation-core";
injectHTMLNavigationElement({ environment: "stage" });
选项2:直接使用 CDN URL( 不使用 npm 包)
通过从我们的 CDN urls 导入已部署的脚本来手动添加, 例如 :
<script type="module" src="https://webcomponents.caspeco.net/v3/index.js"></script>
- 发展:
https://webcomponents.dev.caspeco.net/v{MAJOR_VERSION}/index.js - 阶段 :
https://webcomponents.stage.caspeco.net/v{MAJOR_VERSION}/index.js - 生产:
https://webcomponents.caspeco.net/v{MAJOR_VERSION}/index.js
副作用
移动导航
在小设备上( < 768px),导航被转换为屏幕下方的移动导航栏. 当这种情况发生时 mobile-nav 类被添加到根中 html 文档.
您可能需要更新您的应用程序以应对此变化, 例如改变您的应用程序的高度 100% 改为 calc(100% - var(--mobile-navigation-height))编辑 --mobile-navigation-height 自动添加到根上 html 文档.
这是《概览》页上必须做的一个例子:
main {
height: 100%;
/* ... */
}
+ .mobile-nav main {
+ height: calc(100% - var(--mobile-navigation-height));
+ }
传真
导航 将覆盖您现有的外观 和正确的品牌 favicons 一旦加载.
文档。 标题
截止2025-04-08,导航不会改变您的文档. 标题,但它很快会根据导航中页名自动修改.