@ant-design/pro-layout NPM

English | 简体中文

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.

Usage

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'));

API

ProLayout

All methods at the beginning of the rendering can prevent rendering by passing in false.

Property	Description	Type	Default Value
title	layout in the upper left corner title	ReactNode	`'Ant Design Pro'`
logo	layout top left logo url	ReactNode \| ()=>ReactNode	-
layout	layout menu mode, sidemenu: right navigation, topmenu: top navigation	'sidemenu' \| 'topmenu'	`sidemenu'`
contentWidth	content mode of layout, Fluid: fixed width 1200px, Fixed: adaptive	'Fluid' \| 'Fixed'	`Fluid'`
navTheme	Navigation menu theme	'light' \| 'dark'	`dark`
fixedHeader	whether to fix header to top	boolean	`false`
FixSiderbar	Whether to fix navigation menu	boolean	`false`
autoHideHeader	automatically hide the header when sliding	boolean'	`false`
menu	About the configuration of the menu, only locale, locale can turn off the globalization of the menu	{ locale: boolean }	`{ locale: true }`
iconfontUrl	Use IconFont icon configuration	string	-
locale	The language setting of the layout	'zh-CN' \| 'zh-TW' \| 'en-US'` \| navigator.language
settings	layout settings	`Settings`	`Settings`	-
siderWidth	width of sider menu	number	256
collapsed	control menu's collapse and expansion	boolean	true
onCollapse	folding collapse event of menu	(collapsed: boolean) => void	-
headerRender	custom header render method	(props: BasicLayoutProps) => ReactNode	-
footerRender	custom footer render method	(props: BasicLayoutProps) => ReactNode	-
pageTitleRender	custom page title render method	(props: BasicLayoutProps) => ReactNode	-
menuRender	custom menu render method	(props: HeaderViewProps) => ReactNode	-
menuItemRender	the render method of a custom menu item	(itemProps: MenuDataItem) => ReactNode	-
route	Used to assist in the generation of menu and bread crumbs. Umi will automatically bring	route	-

SettingDrawer

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.

Property	Description	Type	Default Value
settings	layout settings	`Settings`	`Settings`	-
onSettingChange	The setting changes event	(settings: Settings) => void	-

Data Structure

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

Settings

// 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;
  /**
   * auto hide header
   */
  autoHideHeader: 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;
}

MenuDataItem

// 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;
}

Route

// 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'];
  }>;
}

Browsers support

Modern browsers and IE11.

IE / Edge	Firefox	Chrome	Safari	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Contributing

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.

antd admin ant-design ant-design-pro

swr lodash omit.js rc-util warning lodash-es classnames @babel/runtime path-to-regexp @ant-design/icons @umijs/use-params @umijs/route-utils rc-resize-observer @ant-design/cssinjs @ant-design/pro-utils @ant-design/pro-provider

zhouhaifei-react-demo mikorab-uupm-ui nsn_web globalization-idmp-nodejs-application @productfy/common umi-antd cpdm-ui-components-v2 gao_test_11 gao_umi_test11 liuzy-ant-design-pro offline-order-test jyswsdssdfdfdsafdtedsssswdsws ytu-ui yzs-app marna-soluation-pc operation-module1 resetjs-rem @yuanhong/artipub @crawlab-team/artipub-frontend cpdm-components rayplus_fus_front snake-form-design-1 express-umi-project-skeleton samtools-web-template prefer-code-s @toplion/components shj-echarts-next @jshos/ant ant-views fiotui @resetjs/rem xh-common-pck simple-antd-management-fast-framework @cpdmc/display @toplion/web isoftstone-umijs os-console scrm-admin fl-layout @everything-registry/sub-chunk-69 next-business-components tapque-components tapque-react-components task-page task-page1 task-page2 svl-admin-template test-donggod test-formily wodax-umi-plugin-block-dev wallb wdxantd vue-bbcloud-page teams-max-demo v2ba via-test-rbac vlk-admin @dingyun/platform-types @cowin/basic-platform @cpdm/tpl @cpdm/layout @rothub/ant jiguang-lowcode-components jjb-react-admin-component-new juepeiscm-antd-repack jostools kalazan inte-super-methods kerberos-container kewei-gobest norush-hooks spk-antd strategy-canvas-panel spa_pro_yshenghuo ucmllowcode ufc-host-app tinso-scantron umi-plugin-admin umi-plugin-autotips-components umi-plugin-multi-panels umi-plugin-private-antd-theme umi-plugin-sumztech-layout umi3-base tms-biz-components @aidc/chrome-extension-deal-dazzle @apaas-lego/ide @asany/components @ant-design/pro-components @admin-layout/ant-design-pro @alisps/sps-micro-app @alitajs/access-layout @baic/yolk-web-dependencies @baic/preset-yolk-web @bigfish_123/fish-design @castianta/card-list @castianta/telecontrol-card @castianta/telecontrol-command @castianta/telecontrol-send @castianta/telemetry-base @castianta/telemetry-important

8 months ago

8 months ago

10 months ago

9 months ago

10 months ago

11 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

7.0.0-experimental.19

3 years ago

7.0.0-experimental.17

3 years ago

7.0.0-experimental.18

3 years ago

7.0.0-experimental.15

3 years ago

7.0.0-experimental.16

3 years ago

7.0.0-experimental.13

3 years ago

7.0.0-experimental.14

3 years ago

7.0.0-experimental.12

3 years ago

7.0.0-experimental.28

3 years ago

7.0.0-experimental.29

3 years ago

7.0.0-experimental.26

3 years ago

7.0.0-experimental.27

3 years ago

7.0.0-experimental.24

3 years ago

7.0.0-experimental.25

3 years ago

7.0.0-experimental.22

3 years ago

7.0.0-experimental.23

3 years ago

7.0.0-experimental.20

3 years ago

7.0.0-experimental.21

3 years ago

7.0.0-experimental.35

3 years ago

7.0.0-experimental.36

3 years ago

7.0.0-experimental.33

3 years ago

7.0.0-experimental.34

3 years ago

7.0.0-experimental.31

3 years ago

7.0.0-experimental.32

3 years ago

7.0.0-experimental.30

3 years ago

7.0.0-experimental.42

3 years ago

7.0.0-experimental.40

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

7.0.0-experimental.11

3 years ago

7.0.1-beta.20

3 years ago

7.0.0-experimental.2

3 years ago

7.0.1-beta.21

3 years ago

7.0.0-experimental.10

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago