{"id":13537269,"url":"https://github.com/ant-design/ant-design-pro-layout","last_synced_at":"2025-04-02T04:30:29.843Z","repository":{"id":57097673,"uuid":"179617983","full_name":"ant-design/ant-design-pro-layout","owner":"ant-design","description":"🌃 Powerful and easy to use beautiful layout","archived":true,"fork":false,"pushed_at":"2020-08-07T10:51:24.000Z","size":16104,"stargazers_count":1002,"open_issues_count":31,"forks_count":238,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-03-18T04:47:46.772Z","etag":null,"topics":["admin","ant-design","ant-design-pro","layout","react","umi"],"latest_commit_sha":null,"homepage":"https://prolayout.ant.design/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ant-design.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.en-US.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-05T04:17:37.000Z","updated_at":"2025-03-12T12:54:54.000Z","dependencies_parsed_at":"2022-08-20T18:10:25.700Z","dependency_job_id":null,"html_url":"https://github.com/ant-design/ant-design-pro-layout","commit_stats":null,"previous_names":[],"tags_count":131,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fant-design-pro-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fant-design-pro-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fant-design-pro-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fant-design-pro-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ant-design","download_url":"https://codeload.github.com/ant-design/ant-design-pro-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246648059,"owners_count":20811443,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin","ant-design","ant-design-pro","layout","react","umi"],"created_at":"2024-08-01T09:00:57.104Z","updated_at":"2025-04-02T04:30:28.927Z","avatar_url":"https://github.com/ant-design.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# 此仓库已废弃\n\n**重要：** 此仓库后续不再维护，也不再接受更多的特性更新。`ant-design/pro-layout` 将会迁移至 `ant-design/pro-components` 仓库进行后续的维护，访问 https://procomponent.ant.design/layout 了解更多。此变更不影响继续使用 `@ant-design/pro-layout` 这个 npm 包名安装使用此组件。\n\n\nEnglish | [简体中文](./README.zh-CN.md) [changelog](./changelog.en-US.md)\n\n![](https://codecov.io/gh/ant-design/ant-design-pro-layout/branch/master/graph/badge.svg)\n[![](https://img.shields.io/npm/dw/@ant-design/pro-layout.svg)](https://www.npmjs.com/package/@ant-design/pro-layout) [![npm package](https://img.shields.io/npm/v/@ant-design/pro-layout.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-layout) [![](https://img.shields.io/github/issues/ant-design/ant-design-pro-layout.svg)](https://github.com/ant-design/ant-design-pro-layout/issues) \n\n\u003ch1 align=\"center\"\u003eAnt Design Pro Layout\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n![image](https://gw.alipayobjects.com/zos/antfincdn/raCkHezMns/Kapture%2525202019-11-25%252520at%25252019.15.12.gif)\n\nAn out-of-box UI solution for enterprise applications as a React boilerplate. This repository is the layout of Ant Design Pro and was developed for quick and easy use of the layout.\n\n\u003c/div\u003e\n\n## Usage\n\n```bash\nnpm i @ant-design/pro-layout --save\n// or\nyarn add @ant-design/pro-layout\n```\n\n```jsx | pure\nimport ProLayout from '@ant-design/pro-layout';\n\nrender(\u003cProLayout /\u003e, document.getElementById('root'));\n```\n\n## Demo\n\n[site](https://ant-design.github.io/ant-design-pro-layout/)\n\n## API\n\n### ProLayout\n\n\u003e All methods with the suffix `Render` can prevent rendering by passing in `false`.\n\n\n| Property | Description | Type | Default Value |\n| --- | --- | --- | --- |\n| title | layout in the upper left corner title | ReactNode | `'Ant Design Pro'` |\n| logo | layout top left logo url | ReactNode \\| ()=\u003eReactNode | - |\n| pure | Interface that doesn't require extra ui | boolean | - |\n| loading | layout loading status | boolean | - |\n| menuHeaderRender | render logo and title | ReactNode \\| (logo,title)=\u003eReactNode | - |\n| onMenuHeaderClick | menu header click event | `(e: React.MouseEvent\u003cHTMLDivElement\u003e) =\u003e void` | - |\n| contentStyle | layout content style | CSSProperties | - |\n| layout | layout menu mode, side: right navigation, top: top navigation | 'side' \\| 'top' | `'side'` |\n| contentWidth | content mode of layout, Fluid: fixed width 1200px, Fixed: adaptive | 'Fluid' \\| 'Fixed' | `'Fluid'` |\n| navTheme | Navigation menu theme | 'light' \\| 'dark' | `'dark'` |\n| fixedHeader | whether to fix header to top | boolean | `false` |\n| fixSiderbar | Whether to fix navigation menu | boolean | `false` |\n| breakpoint | [breakpoints](https://ant.design/components/grid/#api) of the responsive layout | `Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }` | `lg` |\n| menu | About the configuration of the menu, only locale, locale can turn off the globalization of the menu | { locale: boolean,defaultOpenAll: boolean } | `{ locale: true }` |\n| iconfontUrl | Use [IconFont](https://ant.design/components/icon-cn/#components-icon-demo-iconfont) icon configuration | string | - |\n| locale | The language setting of the layout | 'zh-CN' \\| 'zh-TW' \\| 'en-US' | navigator.language |\n| settings | layout settings | [`Settings`](#Settings) | [`Settings`](#Settings) | - |\n| siderWidth | width of sider menu | number | 256 |\n| collapsed | control menu's collapse and expansion | boolean | true |\n| onPageChange | Triggered when page switching | (location: Location) =\u003e void | - |\n| onCollapse | folding collapse event of menu | (collapsed: boolean) =\u003e void | - |\n| headerRender | custom header render method | (props: BasicLayoutProps) =\u003e ReactNode | - |\n| headerTitleRender | custom header title render method | (props: BasicLayoutProps) =\u003e ReactNode | - |\n| headerContentRender | custom header content render method | (props: BasicLayoutProps) =\u003e ReactNode | - |\n| rightContentRender | header right content render method | (props: HeaderViewProps) =\u003e ReactNode | - |\n| collapsedButtonRender | custom collapsed button method | (collapsed: boolean) =\u003e ReactNode | - |\n| footerRender | custom footer render method | (props: BasicLayoutProps) =\u003e ReactNode | - |\n| pageTitleRender | custom page title render method | (props: BasicLayoutProps) =\u003e ReactNode | - |\n| menuRender | custom menu render method | (props: HeaderViewProps) =\u003e ReactNode | - |\n| menuDataRender | The render method of menuData, with the definition of menuData | `(menuData: MenuDataItem[]) =\u003e MenuDataItem[]` | - |\n| postMenuData | View the menu data before displaying it. Modification will not trigger re-rendering. | `(menuData: MenuDataItem[]) =\u003e MenuDataItem[]` | - |\n| postMenuData |\n| menuItemRender | the render method of a custom menu item | [(itemProps: MenuDataItem) =\u003e ReactNode](#MenuDataItem) | - |\n| subMenuItemRender | the render method of a custom subMenu item | [(itemProps: MenuDataItem) =\u003e ReactNode](#MenuDataItem) | - |\n| breadcrumbRender | custom breadcrumbs data | (route)=\u003eroute | - |\n| route | Used to assist in the generation of menu and bread crumbs. Umi will automatically bring | [route](#Route) | - |\n| disableMobile | Disable automatic switch to mobile mode | boolean | false |\n| links | Shortcuts displayed in the lower right corner of the menu | ReactNode[] | - |\n| menuProps | Props passed to ANTD MENU, SEE (https://ant.design/components/menu-cn/) | MenuProps | undefined |\n\nLayout support for most of [Menu](https://ant.design/components/menu-cn/#Menu) by `menuProps` after 4.5.13.\n\n### SettingDrawer\n\n```js | pure\nimport { SettingDrawer } from '@ant-design/pro-layout';\n```\n\n\u003e SettingDrawer provides a graphical interface to set the layout configuration. Not recommended for use in a product environment.\n\n| Property | Description | Type | Default Value |\n| --- | --- | --- | --- |\n| settings | layout settings | [`Settings`](#Settings) | [`Settings`](#Settings) | - |\n| onSettingChange | The setting changes event | (settings: [Settings](#Settings)) =\u003e void | - |\n| hideHintAlert | remove hint info | boolean | - |\n\n### PageContainer\n\nPageContainer encapsulates the PageHeader component of ant design, adds tabList, and content. Fill in the title and breadcrumb based on the current route. It depends on the route property of the Layout. Of course you can pass in parameters to override the default values. PageContainer supports all the attributes of [Tabs](https://ant.design/components/tabs-cn/) and [PageHeader](https://ant.design/components/page-header-cn/).\n\n| Property | Description | Type | Default Value |\n| --- | --- | --- | --- |\n| content | Content area | ReactNode | - |\n| extraContent | Extra content area, on the right side of content | ReactNode | - |\n| tabList | Tabs title list | `Array\u003c{key: string, tab: ReactNode}\u003e` | - |\n| tabActiveKey | The currently highlighted tab item | string | - |\n| onTabChange | Switch panel callback | `(key) =\u003e void` | - |\n| tabBarExtraContent | Extra elements on the tab bar | React.ReactNode | - |\n\n### PageLoading\n\na simple loading page\n\n| Property | Description | Type      | Default Value |\n| -------- | ----------- | --------- | ------------- |\n| tip      | loading tip | ReactNode | -             |\n\n### RouteContext\n\nRouteContext can provide built-in data for Layout. For example, isMobile and collapsed, you can consume this data to customize some behavior.\n\n```tsx | pure\nimport { RouteContext, RouteContextType } from '../index';\n\nconst Page = () =\u003e (\n  \u003cRouteContext.Consumer\u003e\n    {(value: RouteContextType) =\u003e {\n      return value.title;\n    }}\n  \u003c/RouteContext.Consumer\u003e\n);\n```\n\n### GridContent\n\nGridContent encapsulates [equal width](https://preview.pro.ant.design/dashboard/analysis?layout=top\u0026contentWidth=Fixed) and [streaming](https://preview.pro.ant.design/dashboard/) The logic of analysis?layout=top). You can see the preview in [preview](https://preview.pro.ant.design/dashboard/analysis).\n\n| Property     | Description  | Type               | Default Value |\n| ------------ | ------------ | ------------------ | ------------- |\n| contentWidth | Content mode | 'Fluid' \\| 'Fixed' | -             |\n\n### getMenuData\n\nGenerate menuData and breadcrumb based on the router information.\n\n```js | pure\nimport { getMenuData } from '@ant-design/pro-layout';\n\nconst { breadcrumb, menuData } = getMenuData(\n  routes,\n  menu,\n  formatMessage,\n  menuDataRender,\n);\n```\n\n| Property | Description | Type | Default Value |\n| --- | --- | --- | --- |\n| routes | Routing configuration information | [route[]](#Route) | - |\n| menu | Menu configuration item, default `{locale: true}` | `{ locale: boolean }` | - |\n| menuDataRender | The render method of menuData, with the definition of menuData | `(menuData: MenuDataItem[]) =\u003e MenuDataItem[]` | - |\n| formatMessage | The formatMessage method of react-intl | `(data: { id: any; defaultMessage?: string }) =\u003e string;` | - |\n\n### getPageTitle\n\n```js | pure\nimport { getPageTitle } from '@ant-design/pro-layout';\n\nconst title = getPageTitle({\n  pathname,\n  breadcrumb,\n  menu,\n  title,\n  formatMessage,\n});\n```\n\ngetPageTitle encapsulates the logic based on the title generated on menuData.\n\n| Property | Description | Type | Default Value |\n| --- | --- | --- | --- |\n| pathname | Current pathname | location.pathname | - |\n| breadcrumb | Collection of MenuDataItem | `{ [path: string]: MenuDataItem }` | - |\n| menu | Menu configuration item, default `{locale: true}` | `{ locale: boolean }` | - |\n| title | Type of title | string | 'Ant Design Pro' |\n| formatMessage | The formatMessage method of react-intl | `(data: { id: any; defaultMessage?: string }) =\u003e string;` | - |\n\n## Data Structure\n\n\u003e For ease of viewing and use, Typescript is used here to write.\n\n### Settings\n\n```ts | pure\n// can be done via import { Settings } from '@ant-design/pro-layout/defaultSettings' to get this type\n\nexport interface Settings {\n  /**\n   * theme for nav menu\n   */\n  navTheme: 'light' | 'dark';\n  /**\n   * primary color of ant design\n   */\n  primaryColor: string;\n  /**\n   * nav menu position: `side` or `top`\n   */\n  layout: 'side' | 'top';\n  /**\n   * layout of content: `Fluid` or `Fixed`, only works when layout is top\n   */\n  contentWidth: 'Fluid' | 'Fixed';\n  /**\n   * sticky header\n   */\n  fixedHeader: boolean;\n  /**\n   * sticky siderbar\n   */\n  fixSiderbar: boolean;\n  menu: { locale: boolean };\n  title: string;\n  pwa: boolean;\n  // Your custom iconfont Symbol script Url\n  // eg：//at.alicdn.com/t/font_1039637_btcrd5co4w.js\n  // Usage: https://github.com/ant-design/ant-design-pro/pull/3517\n  iconfontUrl: string;\n  colorWeak: boolean;\n}\n```\n\n### MenuDataItem\n\n```ts | pure\n// can be imported { MenuDataItem } from '@ant-design/pro-layout/typings' to get this type\n\nexport interface MenuDataItem {\n  authority?: string[] | string;\n  children?: MenuDataItem[];\n  hideChildrenInMenu?: boolean;\n  hideInMenu?: boolean;\n  icon?: string;\n  locale?: string;\n  name?: string;\n  path: string;\n  [key: string]: any;\n}\n```\n\n### Route\n\n```ts | pure\n// can be imported { RouterTypes } from '@ant-design/pro-layout/typings'  to get this type\nexport interface Route {\n  path: string;\n  routes: Array\u003c{\n    exact?: boolean;\n    icon: string;\n    name: string;\n    path: string;\n    // optional secondary menu\n    children?: Route['routes'];\n  }\u003e;\n}\n```\n\n## Contributing\n\nAny type of contribution is welcome, here are some examples of how you may contribute to this project:\n\n- Use Ant Design Pro in your daily work.\n- Submit [issues](http://github.com/ant-design/ant-design-pro/issues) to report bugs or ask questions.\n- Propose [pull requests](http://github.com/ant-design/ant-design-pro/pulls) to improve our code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fant-design%2Fant-design-pro-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fant-design%2Fant-design-pro-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fant-design%2Fant-design-pro-layout/lists"}