@ant-design/pro-layout

What is @ant-design/pro-layout?

@ant-design/pro-layout is a layout component library for React applications, specifically designed to work seamlessly with Ant Design. It provides a set of high-level components and utilities to create professional and responsive layouts for web applications.

What are @ant-design/pro-layout's main functionalities?

Basic Layout

This code demonstrates how to create a basic layout using ProLayout. It includes a title, logo, and a simple menu with 'Home' and 'About' links.

```jsx
import React from 'react';
import ProLayout from '@ant-design/pro-layout';
import { PageContainer } from '@ant-design/pro-layout';

const BasicLayout = () => (
  <ProLayout
    title="My App"
    logo="/logo.png"
    menuDataRender={() => [
      { path: '/', name: 'Home' },
      { path: '/about', name: 'About' }
    ]}
  >
    <PageContainer>
      <div>Welcome to my app!</div>
    </PageContainer>
  </ProLayout>
);

export default BasicLayout;
```

Custom Menu

This code demonstrates how to create a layout with a custom menu. Each menu item includes an icon, enhancing the visual appeal and usability of the navigation.

```jsx
import React from 'react';
import ProLayout from '@ant-design/pro-layout';
import { PageContainer } from '@ant-design/pro-layout';

const CustomMenuLayout = () => (
  <ProLayout
    title="My App"
    logo="/logo.png"
    menuDataRender={() => [
      { path: '/', name: 'Home', icon: 'home' },
      { path: '/about', name: 'About', icon: 'info-circle' }
    ]}
  >
    <PageContainer>
      <div>Welcome to my app!</div>
    </PageContainer>
  </ProLayout>
);

export default CustomMenuLayout;
```

Breadcrumb Navigation

This code demonstrates how to add breadcrumb navigation to the layout. Breadcrumbs help users understand their current location within the app and navigate back to previous pages easily.

```jsx
import React from 'react';
import ProLayout from '@ant-design/pro-layout';
import { PageContainer } from '@ant-design/pro-layout';

const BreadcrumbLayout = () => (
  <ProLayout
    title="My App"
    logo="/logo.png"
    menuDataRender={() => [
      { path: '/', name: 'Home' },
      { path: '/about', name: 'About' }
    ]}
    breadcrumbRender={(route) => [
      { path: '/', breadcrumbName: 'Home' },
      { path: '/about', breadcrumbName: 'About' }
    ]}
  >
    <PageContainer>
      <div>Welcome to my app!</div>
    </PageContainer>
  </ProLayout>
);

export default BreadcrumbLayout;
```

Other packages similar to @ant-design/pro-layout

react-admin

react-admin is a frontend framework for building admin applications on top of REST/GraphQL APIs. It provides a set of high-level components and utilities to create professional and responsive admin interfaces. Compared to @ant-design/pro-layout, react-admin is more focused on data management and CRUD operations.

material-ui

material-ui is a popular React UI framework that implements Google's Material Design. It provides a wide range of components and layout utilities to create responsive and visually appealing web applications. While @ant-design/pro-layout is tailored for Ant Design, material-ui offers a different design language and a broader set of components.

semantic-ui-react

semantic-ui-react is the official React integration for Semantic UI. It provides a set of components and layout utilities to create responsive and semantic web applications. Compared to @ant-design/pro-layout, semantic-ui-react offers a different design philosophy and a more declarative approach to styling and layout.

README

@ant-design/pro-layout

ProLayout provides a standard, yet flexible, middle and backend layout, with one-click layout switching and automatic menu generation. It can be used with PageContainer to automatically generate breadcrumbs, page headers, and provide a low-cost solution to access the footer toolbar.

When to use

ProLayout can be used to reduce layout costs when content needs to be carried on a page.

Use with umi plugins

ProLayout works best with umi. umi automatically injects the routes from config.ts into the configured layout for us, so we don't have to write the menus by hand.

ProLayout extends umi's router configuration, adding name, icon, locale, hideInMenu, hideChildrenInMenu and other configurations, so that it is easier to generate menus in one place. The data format is as follows.

export interface MenuDataItem {
  /** @name submenu */
  children?: MenuDataItem[];
  /** @name Hide child nodes in the menu */
  hideChildrenInMenu?: boolean;
  /** @name hideSelf and children in menu */
  hideInMenu?: boolean;
  /** @name Icon of the menu */
  icon?: React.ReactNode;
  /** @name Internationalization key for custom menus */
  locale?: string | false;
  /** @name The name of the menu */
  name?: string;
  /** @name is used to calibrate the selected value, default is path */
  key?: string;
  /** @name disable menu option */
  disabled?: boolean;
  /** @name path */
  path?: string;
  /**
   * When this node is selected, the node of parentKeys is also selected
   *
   * @name custom parent node
   */
  parentKeys?: string[];
  /** @name hides itself and elevates child nodes to its level */
  flatMenu?: boolean;

  [key: string]: any;
}

ProLayout will automatically select the menu based on location.pathname and automatically generate the corresponding breadcrumbs. If you don't want to use it, you can configure selectedKeys and openKeys yourself for controlled configuration.

Install

Using npm:

$ npm install --save  @ant-design/pro-layout

or using yarn:

$ yarn add @ant-design/pro-layout