5.0.5-mod.1.5 • Published 2 years ago

@angeloreppucci/ant-design-pro-layout v5.0.5-mod.1.5

Weekly downloads
Last release
2 years ago

English | 简体中文 changelog

npm.io npm package npm.io Dependencies DevDependencies npm.io


An 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.


npm i @ant-design/pro-layout --save
// or
yarn add @ant-design/pro-layout
import ProLayout from '@ant-design/pro-layout';

render(<ProLayout />, document.getElementById('root'));





All methods with the suffix Render can prevent rendering by passing in false.

PropertyDescriptionTypeDefault Value
titlelayout in the upper left corner titleReactNode'Ant Design Pro'
logolayout top left logo urlReactNode | ()=>ReactNode-
loadinglayout loading statusboolean-
menuHeaderRenderrender logo and titleReactNode | (logo,title)=>ReactNode-
onMenuHeaderClickmenu header click event(e: React.MouseEvent<HTMLDivElement>) => void-
contentStylelayout content styleCSSProperties-
layoutlayout menu mode, sidemenu: right navigation, topmenu: top navigation'sidemenu' | 'topmenu''sidemenu'
contentWidthcontent mode of layout, Fluid: fixed width 1200px, Fixed: adaptive'Fluid' | 'Fixed''Fluid'
navThemeNavigation menu theme'light' | 'dark''dark'
fixedHeaderwhether to fix header to topbooleanfalse
fixSiderbarWhether to fix navigation menubooleanfalse
breakpointbreakpoints of the responsive layoutEnum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }lg
menuAbout the configuration of the menu, only locale, locale can turn off the globalization of the menu{ locale: boolean,defaultOpenAll: boolean }{ locale: true }
iconfontUrlUse IconFont icon configurationstring-
localeThe language setting of the layout'zh-CN' | 'zh-TW' | 'en-US'navigator.language
settingslayout settingsSettingsSettings-
siderWidthwidth of sider menunumber256
collapsedcontrol menu's collapse and expansionbooleantrue
onPageChangeTriggered when page switching(location: Location) => void-
onCollapsefolding collapse event of menu(collapsed: boolean) => void-
headerRendercustom header render method(props: BasicLayoutProps) => ReactNode-
rightContentRenderheader right content render method(props: HeaderViewProps) => ReactNode-
collapsedButtonRendercustom collapsed button method(collapsed: boolean) => ReactNode-
footerRendercustom footer render method(props: BasicLayoutProps) => ReactNode-
pageTitleRendercustom page title render method(props: BasicLayoutProps) => ReactNode-
menuRendercustom menu render method(props: HeaderViewProps) => ReactNode-
menuDataRenderThe render method of menuData, with the definition of menuData(menuData: MenuDataItem[]) => MenuDataItem[]-
postMenuDataView the menu data before displaying it. Modification will not trigger re-rendering.(menuData: MenuDataItem[]) => MenuDataItem[]-
menuItemRenderthe render method of a custom menu item(itemProps: MenuDataItem) => ReactNode-
subMenuItemRenderthe render method of a custom subMenu item(itemProps: MenuDataItem) => ReactNode-
breadcrumbRendercustom breadcrumbs data(route)=>route-
routeUsed to assist in the generation of menu and bread crumbs. Umi will automatically bringroute-
disableMobileDisable automatic switch to mobile modebooleanfalse
linksShortcuts displayed in the lower right corner of the menuReactNode[]-
menuPropsProps passed to ANTD MENU, SEE (https://ant.design/components/menu-cn/)MenuPropsundefined

Layout support for most of Menu by menuProps after 4.5.13.


import { SettingDrawer } from '@ant-design/pro-layout';

SettingDrawer provides a graphical interface to set the layout configuration. Not recommended for use in a product environment.

PropertyDescriptionTypeDefault Value
settingslayout settingsSettingsSettings-
onSettingChangeThe setting changes event(settings: Settings) => void-
hideHintAlertremove hint infoboolean-


PageHeaderWrapper 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. PageHeaderWrapper supports all the attributes of Tabs and PageHeader.

PropertyDescriptionTypeDefault Value
contentContent areaReactNode-
extraContentExtra content area, on the right side of contentReactNode-
tabListTabs title listArray<{key: string, tab: ReactNode}>-
tabActiveKeyThe currently highlighted tab itemstring-
onTabChangeSwitch panel callback(key) => void-
tabBarExtraContentExtra elements on the tab barReact.ReactNode-


a simple loading page

PropertyDescriptionTypeDefault Value
tiploading tipReactNode-


RouteContext can provide built-in data for Layout. For example, isMobile and collapsed, you can consume this data to customize some behavior.

import { RouteContext } from '@ant-design/pro-layout';

const Page = () => (
    {value => {
      return value.title;


GridContent encapsulates equal width and streaming The logic of analysis?layout=topmenu). You can see the preview in preview.

PropertyDescriptionTypeDefault Value
contentWidthContent mode'Fluid' | 'Fixed'-


Generate menuData and breadcrumb based on the router information.

import { getMenuData } from '@ant-design/pro-layout';

const { breadcrumb, menuData } = getMenuData(
PropertyDescriptionTypeDefault Value
routesRouting configuration informationroute[]-
menuMenu configuration item, default {locale: true}{ locale: boolean }-
menuDataRenderThe render method of menuData, with the definition of menuData(menuData: MenuDataItem[]) => MenuDataItem[]-
formatMessageThe formatMessage method of react-intl(data: { id: any; defaultMessage?: string }) => string;-


import { getPageTitle } from '@ant-design/pro-layout';

const title = getPageTitle({

getPageTitle encapsulates the logic based on the title generated on menuData.

PropertyDescriptionTypeDefault Value
pathnameCurrent pathnamelocation.pathname-
breadcrumbCollection of MenuDataItem{ [path: string]: MenuDataItem }-
menuMenu configuration item, default {locale: true}{ locale: boolean }-
titleType of titlestring'Ant Design Pro'
formatMessageThe formatMessage method of react-intl(data: { id: any; defaultMessage?: string }) => string;-

Data Structure

For ease of viewing and use, Typescript is used here to write.


// can be done via import { Settings } from '@ant-design/pro-layout/defaultSettings' to get this type

export interface Settings {
   * theme for nav menu
  navTheme: 'light' | 'dark';
   * primary color of ant design
  primaryColor: string;
   * nav menu position: `sidemenu` or `topmenu`
  layout: 'sidemenu' | 'topmenu';
   * layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
  contentWidth: 'Fluid' | 'Fixed';
   * sticky header
  fixedHeader: boolean;
   * sticky siderbar
  fixSiderbar: boolean;
  menu: { locale: boolean };
  title: string;
  pwa: boolean;
  // Your custom iconfont Symbol script Url
  // eg://at.alicdn.com/t/font_1039637_btcrd5co4w.js
  // Usage: https://github.com/ant-design/ant-design-pro/pull/3517
  iconfontUrl: string;
  colorWeak: boolean;


// can be imported { MenuDataItem } from '@ant-design/pro-layout/typings' to get this type

export interface MenuDataItem {
  authority?: string[] | string;
  children?: MenuDataItem[];
  hideChildrenInMenu?: boolean;
  hideInMenu?: boolean;
  icon?: string;
  locale?: string;
  name?: string;
  path: string;
  [key: string]: any;


// can be imported { RouterTypes } from '@ant-design/pro-layout/typings'  to get this type
export interface Route {
  path: string;
  routes: Array<{
    exact?: boolean;
    icon: string;
    name: string;
    path: string;
    // optional secondary menu
    children?: Route['routes'];


Any type of contribution is welcome, here are some examples of how you may contribute to this project:

  • Use Ant Design Pro in your daily work.
  • Submit issues to report bugs or ask questions.
  • Propose pull requests to improve our code.