7.1.2 • Published 11 days ago

@ant-design/pro-layout v7.1.2

Weekly downloads
16,605
License
MIT
Repository
github
Last release
11 days ago

English | 简体中文

npm.io npm package npm.io Dependencies DevDependencies

image

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.

PropertyDescriptionTypeDefault Value
titlelayout in the upper left corner titleReactNode'Ant Design Pro'
logolayout top left logo urlReactNode | ()=>ReactNode-
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
autoHideHeaderautomatically hide the header when slidingboolean'false
menuAbout the configuration of the menu, only locale, locale can turn off the globalization of the menu{ locale: 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
onCollapsefolding collapse event of menu(collapsed: boolean) => void-
headerRendercustom header render method(props: BasicLayoutProps) => ReactNode-
footerRendercustom footer render method(props: BasicLayoutProps) => ReactNode-
pageTitleRendercustom page title render method(props: BasicLayoutProps) => ReactNode-
menuRendercustom menu render method(props: HeaderViewProps) => ReactNode-
menuItemRenderthe render method of a custom menu item(itemProps: MenuDataItem) => ReactNode-
routeUsed to assist in the generation of menu and bread crumbs. Umi will automatically bringroute-

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.

PropertyDescriptionTypeDefault Value
settingslayout settingsSettingsSettings-
onSettingChangeThe 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 / EdgeFirefoxChromeSafariOpera
IE11, Edgelast 2 versionslast 2 versionslast 2 versionslast 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.
mikorab-uupm-uinsn_webglobalization-idmp-nodejs-application@productfy/commonumi-antdcpdm-ui-components-v2gao_test_11gao_umi_test11liuzy-ant-design-prooffline-order-testjyswsdssdfdfdsafdtedsssswdswsytu-uiyzs-appmarna-soluation-pcoperation-module1resetjs-rem@yuanhong/artipub@crawlab-team/artipub-frontendcpdm-componentsrayplus_fus_frontsnake-form-design-1express-umi-project-skeletonsamtools-web-templateprefer-code-s@toplion/componentsshj-echarts-next@jshos/antant-viewsfiotui@resetjs/remxh-common-pcksimple-antd-management-fast-framework@cpdmc/display@wecity/doc-view-react@wetrial/component@wondon/static@toplion/web@x-poppy/poppy-web@yeeyoon/libraryabeta-ui@xzwl/web-rcadmin-frontend-componentisoftstone-umijsos-consoleant-design-exframeworkantd-management-fast-frameworkantd-custom-componentant-design-proselmer-uiemoji-jsqevdata-ice-templatefhxumifeffery_antd_componentsfe-antd-wealth-mgtfl-layoutideal-admin-reactjostoolskalazankreakin-rbackerberos-containerlgt-uiinte-super-methodsjiguang-lowcode-componentshm-web-componentshand-polardgodot-maphsiaokang-uih2o-uimisyuanmix-datepickermix-datepicker-pclreact-componentmobile-block-devmicrofrontend-frameworkmarna-solution-pclidezhushoumatuanccuigk-comment-demogk-comments-h5jh-componentsdt-hook-utilsdtusercenterdtusercentercompduan-test-tsdusssssform-dynamiclistfosun-mincrofrontendgao-antd-extendfanz-componentsfx-web-componentsgbs-ui-pageheadergbs-ui-pageheaderwrappercustomizedreact-elmer-uipaxy-uinsn-comppage-header-wrapper-customizedpcraft-schemapolardpolaris-componentsoms-biz-components
6.38.19

1 month ago

6.38.18

2 months ago

6.38.20

1 month ago

6.38.22

1 month ago

6.38.21

1 month ago

7.0.7

17 days ago

7.0.6

19 days ago

7.0.5

24 days ago

7.0.1-beta.30

1 month ago

7.0.1-beta.34

1 month ago

7.0.0

1 month ago

7.0.4

25 days ago

7.0.3

27 days ago

7.0.2

1 month ago

7.0.1

1 month ago

7.1.2

11 days ago

7.1.1

12 days ago

7.1.0

12 days ago

6.38.17

2 months ago

6.38.16

2 months ago

6.38.15

2 months ago

6.38.9

4 months ago

6.38.14

2 months ago

6.38.13

3 months ago

6.38.12

3 months ago

6.38.11

3 months ago

6.38.10

3 months ago

6.38.7

4 months ago

6.38.8

4 months ago

6.38.5

4 months ago

6.38.6

4 months ago

7.0.1-beta.20

4 months ago

7.0.1-beta.21

3 months ago

7.0.1-beta.22

3 months ago

7.0.1-beta.23

3 months ago

7.0.1-beta.24

3 months ago

7.0.1-beta.25

3 months ago

7.0.1-beta.26

3 months ago

7.0.1-beta.27

3 months ago

7.0.1-beta.28

3 months ago

7.0.1-beta.29

2 months ago

7.0.1-beta.15

4 months ago

7.0.1-beta.16

4 months ago

7.0.1-beta.17

4 months ago

7.0.1-beta.18

4 months ago

7.0.1-beta.19

4 months ago

6.38.3

5 months ago

6.38.4

5 months ago

6.38.1

5 months ago

6.38.2

5 months ago

6.38.0

5 months ago

6.37.0

5 months ago

7.0.1-beta.14

5 months ago

6.36.1

5 months ago

6.36.0

5 months ago

7.0.1-beta.10

7 months ago

7.0.1-beta.11

6 months ago

7.0.1-beta.12

6 months ago

7.0.1-beta.13

6 months ago

7.0.1-beta.6

7 months ago

7.0.1-beta.5

7 months ago

7.0.1-beta.8

7 months ago

7.0.1-beta.7

7 months ago

7.0.1-beta.9

7 months ago

7.0.1-beta.4

7 months ago

7.0.1-beta.3

7 months ago

6.34.11

6 months ago

6.34.10

6 months ago

6.35.0

6 months ago

6.35.1

6 months ago

6.34.7

6 months ago

6.34.8

6 months ago

6.34.5

7 months ago

6.34.6

6 months ago

6.34.9

6 months ago

6.34.3

7 months ago

6.34.4

7 months ago

6.34.1

7 months ago

6.34.2

7 months ago

7.0.1-beta.0

7 months ago

7.0.1-beta.2

7 months ago

6.34.0

7 months ago

6.33.1

7 months ago

7.0.0-beta.0

7 months ago

6.32.9

8 months ago

6.32.7

8 months ago

6.32.8

8 months ago

6.32.1

9 months ago

6.32.2

9 months ago

6.32.0

9 months ago

6.32.5

9 months ago

6.32.6

8 months ago

6.32.3

9 months ago

6.32.14

8 months ago

6.32.12

8 months ago

6.32.13

8 months ago

6.32.10

8 months ago

6.32.11

8 months ago

6.32.0-beta.6

9 months ago

6.32.0-beta.7

9 months ago

6.32.0-beta.8

9 months ago

6.32.0-beta.2

10 months ago

6.31.6

10 months ago

6.32.0-beta.3

10 months ago

6.31.7

10 months ago

6.32.0-beta.4

10 months ago

6.31.4

10 months ago

6.32.0-beta.5

9 months ago

6.31.5

10 months ago

6.32.0-beta.0

10 months ago

6.32.0-beta.1

10 months ago

6.33.0

7 months ago

6.29.1

11 months ago

6.29.0

11 months ago

6.31.2

10 months ago

6.31.3

10 months ago

6.31.0

10 months ago

6.31.1

10 months ago

6.28.0

11 months ago

6.28.1

11 months ago

6.30.1

11 months ago

6.30.0

11 months ago

6.27.1

11 months ago

6.27.2

11 months ago

7.0.1-alpha.4

11 months ago

7.0.1-alpha.3

11 months ago

7.0.1-alpha.5

11 months ago

6.27.0

11 months ago

6.26.1-alpha.0

12 months ago

6.26.1

12 months ago

7.0.1-alpha.0

12 months ago

7.0.1-alpha.2

12 months ago

7.0.1-alpha.1

12 months ago

6.26.4

12 months ago

6.26.5

12 months ago

6.26.2

12 months ago

6.26.3

12 months ago

6.26.6

12 months ago

6.26.0

1 year ago

6.25.7

1 year ago

6.25.6

1 year ago

6.25.5

1 year ago

6.25.3

1 year ago

6.25.4

1 year ago

6.25.2

1 year ago

6.25.1

1 year ago

6.25.0

1 year ago

6.24.3

1 year ago

6.24.2

1 year ago

6.24.1

1 year ago

6.24.0

1 year ago

6.23.4

1 year ago

6.23.3

1 year ago

6.23.1

1 year ago

6.23.2

1 year ago

6.23.0

1 year ago

6.22.1

1 year ago

6.22.0

1 year ago

6.21.1

1 year ago

6.21.0

1 year ago

6.20.0

1 year ago

6.19.7

1 year ago

6.19.6

1 year ago

6.19.5

1 year ago

6.19.4

1 year ago

6.19.3

1 year ago

6.19.2

1 year ago

6.19.1

1 year ago

6.19.0

1 year ago

6.18.1

1 year ago

6.18.2

1 year ago

6.18.0

1 year ago

6.17.1

1 year ago

6.17.0

1 year ago

6.16.4

1 year ago

6.16.5

1 year ago

6.16.6

1 year ago

6.16.3

1 year ago

6.16.2

1 year ago

6.16.1

1 year ago

6.16.0

2 years ago

6.15.5

2 years ago

6.15.4

2 years ago

6.15.3

2 years ago

6.15.2

2 years ago

6.15.1

2 years ago

6.15.0

2 years ago

6.14.5

2 years ago

6.14.4

2 years ago

6.14.3

2 years ago

6.14.2

2 years ago

6.14.0

2 years ago

6.13.0

2 years ago

6.12.0

2 years ago

6.11.1

2 years ago

6.11.0

2 years ago

6.10.9

2 years ago

6.10.8

2 years ago

6.10.7

2 years ago

6.10.6

2 years ago

6.10.5

2 years ago

6.10.4

2 years ago

6.10.2

2 years ago

6.10.3

2 years ago

6.10.1

2 years ago

6.10.0

2 years ago

6.9.7

2 years ago

6.9.6

2 years ago

6.9.5

2 years ago

6.9.4

2 years ago

6.9.3

2 years ago

6.9.2

2 years ago

6.9.1

2 years ago

6.9.0

2 years ago

6.8.0

2 years ago

6.7.0

2 years ago

6.6.4

2 years ago

6.6.3

2 years ago

6.6.2

2 years ago

6.6.1

2 years ago

6.6.0

2 years ago

6.5.19

2 years ago

6.5.18

2 years ago

6.5.17

2 years ago

6.5.16

2 years ago

6.5.15

2 years ago

6.5.14

2 years ago

6.5.13

2 years ago

6.5.12

2 years ago

6.5.11

2 years ago

6.5.10

2 years ago

6.5.9

2 years ago

6.5.8

2 years ago

6.5.7

2 years ago

6.5.6

2 years ago

6.5.5

2 years ago

6.5.4

2 years ago

6.5.3

2 years ago

6.5.2

2 years ago

6.5.1

2 years ago

6.5.0

2 years ago

6.4.19

2 years ago

6.4.18

2 years ago

6.4.17

2 years ago

6.4.16

2 years ago

6.4.15

2 years ago

6.4.14

2 years ago

6.4.13

2 years ago

6.4.12

2 years ago

6.4.11

2 years ago

6.4.10

2 years ago

6.4.9

2 years ago

6.4.8

2 years ago

6.4.7

2 years ago

6.4.6

2 years ago

6.4.5

2 years ago

6.4.4

2 years ago

6.4.3

2 years ago

6.4.2

2 years ago

6.4.1

2 years ago

6.4.0-beta.1

2 years ago

6.3.0

2 years ago

1.0.0-beta.3

2 years ago

6.2.5

2 years ago

5.0.19

2 years ago

6.2.4

2 years ago

6.2.3

2 years ago

5.0.18

2 years ago

1.0.0-beta.2

2 years ago

6.2.1

2 years ago

6.2.2

2 years ago

6.2.0

2 years ago

6.1.0

2 years ago

6.0.1

2 years ago

6.0.0

2 years ago

6.0.0-8

2 years ago

5.0.17

2 years ago

5.0.16

2 years ago

5.0.15

2 years ago

6.0.0-7

2 years ago

6.0.0-6

2 years ago

5.0.14

2 years ago

5.0.13

2 years ago

6.0.0-5

2 years ago

6.0.0-4

2 years ago

6.0.0-3

2 years ago

6.0.0-2

2 years ago

6.0.0-1

2 years ago

5.0.11

2 years ago

5.0.12

2 years ago

6.0.0-0

2 years ago

5.0.10

2 years ago

4.11.4

2 years ago

5.0.9

3 years ago

5.0.8

3 years ago

5.0.7

3 years ago

5.0.6

3 years ago

4.11.2

3 years ago

4.11.3

3 years ago

5.0.5

3 years ago

4.11.1

3 years ago

4.11.0

3 years ago

5.0.4

3 years ago

5.0.3

3 years ago

4.10.16

3 years ago

5.0.2

3 years ago

4.10.15

3 years ago

4.10.14

3 years ago

5.0.1

3 years ago

4.10.13

3 years ago

4.10.12

3 years ago

5.0.0

3 years ago

4.10.11

3 years ago

4.10.10

3 years ago

4.10.9

3 years ago

4.11.0-1

3 years ago

4.10.8

3 years ago

4.10.7

3 years ago

4.11.1-0

3 years ago

4.10.6

3 years ago

4.10.5

3 years ago

4.11.0-0

3 years ago

4.10.4

3 years ago

4.10.3

3 years ago

4.10.2

3 years ago

4.10.1

3 years ago

4.10.0-3

3 years ago

4.10.0

3 years ago

4.10.0-2

3 years ago

4.10.0-1

3 years ago

4.10.0-0

3 years ago

4.9.11

3 years ago

4.9.10

3 years ago

4.9.9

3 years ago

4.9.8

3 years ago

4.9.7

3 years ago

4.9.6

3 years ago

4.9.4

3 years ago

4.9.3

3 years ago

4.9.5

3 years ago

4.9.2

3 years ago

4.9.1

3 years ago

4.9.0-2

3 years ago

4.9.0-1

3 years ago

4.9.0

3 years ago

4.9.0-0

3 years ago

4.8.3

3 years ago

4.8.2

3 years ago

4.8.1

3 years ago

4.8.0

3 years ago

4.7.5-1

3 years ago

4.7.5-2

3 years ago

4.7.5-0

3 years ago

4.7.4

3 years ago

4.7.2

3 years ago

4.7.3

3 years ago

4.7.1

3 years ago

4.7.0

3 years ago

4.7.0-3

3 years ago

4.7.0-2

3 years ago

4.7.0-1

3 years ago

4.7.0-0

3 years ago

4.6.2

3 years ago

4.6.1

3 years ago

4.6.1-0

3 years ago

4.6.0

3 years ago

4.5.16

3 years ago

4.5.15

3 years ago

4.5.14

3 years ago

4.5.13

3 years ago

4.5.12

3 years ago

4.5.11

3 years ago

4.5.10

3 years ago

4.5.9

3 years ago

4.5.8

3 years ago

4.5.8-beta.1

3 years ago

4.5.8-beta0

3 years ago

4.5.7

3 years ago

4.5.6

3 years ago

4.5.5

3 years ago

4.5.4

3 years ago

4.5.3

3 years ago

4.5.2

3 years ago

4.5.1

3 years ago

4.5.0

3 years ago

4.5.0-beta

3 years ago

4.4.2

3 years ago

4.4.1

3 years ago

4.4.0

3 years ago

4.3.2

3 years ago

4.3.1

3 years ago

4.3.0

3 years ago

4.2.2

3 years ago

4.2.1

3 years ago

4.2.0

3 years ago

4.1.4

3 years ago

4.1.3

3 years ago

4.1.2

3 years ago

4.1.1

3 years ago

4.1.0

3 years ago

4.0.12

3 years ago

4.0.11

3 years ago

4.0.10

3 years ago

4.0.9

3 years ago

4.0.8

3 years ago

4.0.7

3 years ago

4.0.6

3 years ago

4.0.5

3 years ago

4.0.4

3 years ago

4.0.3

3 years ago

4.0.2

3 years ago

4.0.1

3 years ago

4.0.0

3 years ago