@atlaskit/团队-app-内部导航

Teams和People & Teams平台的无头导航设施和薄UI包装 软件包。 确保各团队应用程序和嵌入的内部和外部链接保持一致 人/队相出出.

使用量

基本用途

包装您的应用程序 TeamsNavigationProvider 并直接使用链接组件:

import { TeamsNavigationProvider } from '@atlaskit/teams-app-internal-navigation/teams-navigation-provider';
import { TeamsAnchor } from '@atlaskit/teams-app-internal-navigation/teams-anchor';

function MyComponent() {
    return (
        <TeamsNavigationProvider value={{ navigate: pushRoute }}>
            <TeamsAnchor href="/teams/my-team" intent="navigation">
                My team
            </TeamsAnchor>
        </TeamsNavigationProvider>
    );
}

一个完整的示例 TeamsLink, (中文(简体) ), TeamsLinkItem 财务报告和审定财务报表 TeamsLinkButton 进入 examples/basic.tsx。 。 。 .

无头 API

使用 getNavigationProps 当您需要将导航行为写入自定义标记或 非ADS组件 :

import { getNavigationProps } from '@atlaskit/teams-app-internal-navigation/get-navigation-props';

它回来了 href, (中文(简体) ), target, (中文(简体) ), rel 和成员名单 onClick 从一个 href意图, NavigationContext 和可选 onClick。 。 。 .

特征

导航意向

每个链接宣布 意图 控制浏览器或应用程序如何处理导航:

• navigation: 在Atlassian应用程序内部或之间移动
• reference: 文档、支持或参考类 URL
• action: 设置所需道具时可能打开预览面板的内在流
• external:第三方或明确外部目的地
• unknown: 意向通过 URL 自动推断 classifyNavigationIntent

自动分类考虑相对相对于绝对 URL,非 HTTP 方案(mailto:, (中文(简体) ), tel:, (中文(简体) ), )和Atlassian管理的主机(包括FedRAMP和孤立云处理).

导航背景

TeamsAnchor, (中文(简体) ), TeamsLink, (中文(简体) ), TeamsLinkButton 财务报告和审定财务报表 TeamsLinkItem 全部从 NavigationContext 通过反应上下文. 提供者接受:

• navigate(url):设定后,用于SPA型导航. 省略时,浏览器处理 导航(如全页载荷).
• openPreviewPanel(props):可选召回. 对于 action 意图,左键可打开 预览面板而非导航 .
• forceExternalIntent: 当 true,链接表现为外部打开(例如新标签),即使 否则,该 URL 将被视为在应用中导航,在预览面板内有用.

软件包导出

主条目 @atlaskit/teams-app-internal-navigation 出口 TeamsAnchor, (中文(简体) ), TeamsNavigationProvider 财务报告和审定财务报表 useTeamsNavigationContext。 。 。 .