@21epub/pro-layout 中文文档教程
@ant-design/pro-layout
ProLayout 提供了一个标准但灵活的中间和后台布局，一键布局切换，菜单自动生成。 它可以与 PageContainer 一起使用以自动生成面包屑、页眉，并提供访问页脚工具栏的低成本解决方案。
When to use
当页面需要承载内容时，可以使用 ProLayout 来降低布局成本。
Use with umi plugins
ProLayout 搭配 umi 效果最佳。 umi 会自动为我们将 config.ts 中的路由注入到配置好的布局中，这样我们就不用手写菜单了。
ProLayout 扩展了 umi 的 router 配置，增加了 name、icon、locale、hideInMenu、hideChildrenInMenu 等配置，更容易在一处生成菜单。 数据格式如下。
```ts | 纯的 导出界面 MenuDataItem { /** @name 子菜单 / 孩子们？：MenuDataItem []; /* @name 隐藏菜单中的子节点/ hideChildrenInMenu?: 布尔值； /* @name hideSelf and children in menu/ hideInMenu?: 布尔值； /* @name 菜单图标/ 图标？：React.ReactNode； /* @name 自定义菜单的国际化键 / 语言环境？：字符串 | 错误的; /* @name 菜单名/ 名称？：字符串； /* @name 用于校准选中的值，默认为路径/ 键？：字符串； /* @name 禁用菜单选项/ 禁用？：布尔值； /* @name 路径 / 路径？：字符串； /*
选择此节点时，还选择了父级节点 *
@name 自定义父节点 / 父键？：字符串[]； /* @name 隐藏自身并将子节点提升到它的级别 */ flatMenu?: 布尔值；
[键：字符串]：任何； }
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:
bash $ yarn 添加@ant-design/pro-layout ```
@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.
```ts | pure 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:
bash $ npm install --save @ant-design/pro-layout
or using yarn:
bash $ yarn add @ant-design/pro-layout ```
