Nocturnal Pumpkin Maelstrom

    @ant-design/pro-layout
    TypeScript icon, indicating that this package has built-in type declarations

    7.1.3 • Public • Published

    @ant-design/pro-layout

    ProLayout provides a standard, yet flexible, middle and backend layout, with one-click layout switching and automatic menu generation. It can be used with PageContainer to automatically generate breadcrumbs, page headers, and provide a low-cost solution to access the footer toolbar.

    When to use

    ProLayout can be used to reduce layout costs when content needs to be carried on a page.

    Use with umi plugins

    ProLayout works best with umi. umi automatically injects the routes from config.ts into the configured layout for us, so we don't have to write the menus by hand.

    ProLayout extends umi's router configuration, adding name, icon, locale, hideInMenu, hideChildrenInMenu and other configurations, so that it is easier to generate menus in one place. The data format is as follows.

    export interface MenuDataItem {
      /** @name submenu */
      children?: MenuDataItem[];
      /** @name Hide child nodes in the menu */
      hideChildrenInMenu?: boolean;
      /** @name hideSelf and children in menu */
      hideInMenu?: boolean;
      /** @name Icon of the menu */
      icon?: React.ReactNode;
      /** @name Internationalization key for custom menus */
      locale?: string | false;
      /** @name The name of the menu */
      name?: string;
      /** @name is used to calibrate the selected value, default is path */
      key?: string;
      /** @name disable menu option */
      disabled?: boolean;
      /** @name path */
      path?: string;
      /**
       * When this node is selected, the node of parentKeys is also selected
       *
       * @name custom parent node
       */
      parentKeys?: string[];
      /** @name hides itself and elevates child nodes to its level */
      flatMenu?: boolean;
    
      [key: string]: any;
    }

    ProLayout will automatically select the menu based on location.pathname and automatically generate the corresponding breadcrumbs. If you don't want to use it, you can configure selectedKeys and openKeys yourself for controlled configuration.

    Install

    Using npm:

    $ npm install --save  @ant-design/pro-layout

    or using yarn:

    $ yarn add @ant-design/pro-layout

    Install

    npm i @ant-design/pro-layout

    DownloadsWeekly Downloads

    21,798

    Version

    7.1.3

    License

    MIT

    Unpacked Size

    321 kB

    Total Files

    146

    Last publish

    Collaborators

    • madccc
    • afc163
    • vthinkxie
    • zombiej
    • chenshuai2144
    • vagusx
    • wynterding
    • yutingzhao1991
    • arvinxx
    • rdmclin2