@ant-design/pro-layout
![](https://gw.alipayobjects.com/zos/antfincdn/HSeAGqaEwn/1586504755352-479bf47d-97a6-4080-afed-d38ffe905e57.png)
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 {
children?: MenuDataItem[];
hideChildrenInMenu?: boolean;
hideInMenu?: boolean;
icon?: React.ReactNode;
locale?: string | false;
name?: string;
key?: string;
disabled?: boolean;
path?: string;
parentKeys?: string[];
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