Skip to content

Latest commit

 

History

History
110 lines (91 loc) · 2.8 KB

3-12-Menu-introduction.md

File metadata and controls

110 lines (91 loc) · 2.8 KB
Raw

English | 简体中文

Usage

  • Jump to the corresponding page after click

  • Configuration of menu item on the left side of the console platform

    console-platform

  • Configuration of menu item on the left side of the management platform

    management-platform

  • Support first-level menu with icon

  • Support secondary menu expand

  • Support menu item selected automatically switch after route change

  • Support for automatic processing of breadcrumbs in the right side

Code location

  • Console platform menu configuration src/layouts/menu.jsx
  • Management platform menu configuration src/layouts/admin-menu.jsx

How to use

  • The menu configuration in console and management platform are the same structure
  • Return a renderMenu function which return a configuration list

first-level menu configuration

  • path

    • URL

  • name

    • Name of route
    • Name of menu item in menu list
    • Name corresponding to the first level menu in breadcrumbs

  • key

    • ID of the route
    • Unique

  • icon

    • the icon of menu
    • When the menu is fully expanded, the icon and name are displayed.
    • When the menu is folded, only the icon is displayed.

  • hasBreadcrumb

    • Whether to show breadcrumbs
    • Default is true
    • Take home page as an example: hasBreadcrumb: false

  • hasChildren

    • Whether the first-level menu contains a submenu
    • Default is true
    • First-level menu may not contain a submenu. For example home page.
    {
  path: '/base/overview',
  name: t('Home'),
  key: '/home',
  icon: <HomeOutlined />,
  hasBreadcrumb: false,
  hasChildren: false,
}

    • First-level menu default contains submenu. For example compute page.

      {
    path: '/compute',
    name: t('Compute'),
    key: '/compute',
    icon: <DesktopOutlined />,
    children: [...]
  }

Submenu configuration

  • Submenu is configured in the children of first-level menu.

  • Pages that do not need to be displayed in the menu, such as detail page, create page, are configured in the children of the submenu.

  • Take flavor as an example

    {
    path: '/compute/flavor',
    name: t('Flavor'),
    key: '/compute/flavor',
    level: 1,
    children: [
      {
        path: /^\/compute\/flavor\/detail\/.[^/]+$/,
        name: t('Flavor Detail'),
        key: 'flavor-detail',
        level: 2,
      },
    ],
  },

  • path

    • Route corresponding to the menu

  • name

    • name of menu
    • Name of menu item in menu list
    • Name in breadcrumbs

  • key

    • ID of menu
    • Unique

  • level

    • submenu correspond to level=1
    • children in submenu correspond to level=2