开发文档

Appearance

title: Tab和菜单导航 ​

对2级导航页面，我们一般有Tab和Menu两种。点击tab或menu切换后需要保持浏览history，在用户点击back键时可跳转到原页面，而不是第一个tab item。

菜单导航 ​

picture 0

使用<KBNavigateMenu items={items}/>组件

Tabs导航 ​

picture 1

使用<KBTabsNavigate items={items}/>组件

Tabs导航2 ​

picture 4

使用方法 ​

  1. 在routes.tsx中对每一个menu或tab设置路由：

picture 2

路由的path对每个tab或menu需要单独定义，只需要设置不同的url值就可以。element都是指向同一个页面组件。

注意：如果路由对应的页面在左侧有二级菜单，url也需要嵌套。这样在跳转到页面时才会自动打开第一级菜单，highlight第二级菜单。

-- 访客 (/visitors)
  -- 访客列表 (/visitors/today)
    -- tab1: /visitors/today/tab1
    -- tab2: /visitors/today/tab2
    ...
  -- 访客设置 (/visitors/settings)
  1. 在页面组件中，设置items:
tsx
const items: NavigateItemType[] = [
    {
      iconName: 'scroll-text',
      label: tr('[intl]基础信息'),
      description: tr('[intl]设置分店名称位置和图片'),
      key: pathUrl('basic'),
      content: <BasicInformationPage />,
    },
    {
      iconName: 'file-cog',
      label: tr('[intl]常规设置'),
      description: tr('[intl]设置系统的一些通用规则'),
      key: pathUrl('general'),
      content: <GeneralSettings />,
    },

注意，每个item的key和routes路由中的path要一致。

  1. 使用导航组件：
tsx
<PageContentLayout
        title={
          <KBSpace>
            <KBIcon name="settings" size={24} />
            <KBTitle level={3}>{tr('[intl]分店设置')}</KBTitle>
          </KBSpace>
        }
      >
        <KBNavigateMenu items={items} />
      </PageContentLayout>

对于更深的导航结构，也可以按照类似的方法，设置路由，采用navigate的方式跳转就可以保证回退。

需要注意的是，如果path中带有变量，如:id,在key和route的path中都需要相应地设置, 如下例：

picture 3