Awesome

此仓库已废弃

重要： 此仓库后续不再维护，也不再接受更多的特性更新。ant-design/pro-layout 将会迁移至 ant-design/pro-components 仓库进行后续的维护，访问 https://procomponent.ant.design/layout 了解更多。此变更不影响继续使用 @ant-design/pro-layout 这个 npm 包名安装使用此组件。

English | 简体中文 changelog

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

Demo

site

API

ProLayout

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

Layout support for most of Menu by menuProps after 4.5.13.

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.

PageContainer

PageContainer 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 and PageHeader.

PageLoading

a simple loading page

RouteContext

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

import { RouteContext, RouteContextType } from '../index';

const Page = () => (
  <RouteContext.Consumer>
    {(value: RouteContextType) => {
      return value.title;
    }}
  </RouteContext.Consumer>
);

GridContent

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

getMenuData

Generate menuData and breadcrumb based on the router information.

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

const { breadcrumb, menuData } = getMenuData(
  routes,
  menu,
  formatMessage,
  menuDataRender,
);

getPageTitle

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

const title = getPageTitle({
  pathname,
  breadcrumb,
  menu,
  title,
  formatMessage,
});

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

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: `side` or `top`
   */
  layout: 'side' | 'top';
  /**
   * layout of content: `Fluid` or `Fixed`, only works when layout is top
   */
  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;
}

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

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.