ProComponents ProLayout

https://procomponents.ant.design/components/layout
Admin
ProLayout provides a standard yet flexible layout for mid-back office applications, offering...
Tokens:7,828
Snippets:19
Trust Score:9.6
Update:10 months ago
Show doc for...
Tokens:
Raw
### Custom Fetch Request Adaptor for ProTable

Source: https://procomponents.ant.design/components/layout/components

This example shows how to create a custom `fetch` based request function that adapts the response data to the structure required by ProComponents. This is useful when not using UmiJS's request or when a more direct control over the fetch API is needed. The adaptor transforms the response to include `total`, `success`, and `errorMessage` properties.

```typescript
const request = (url, options) => {
  return fetch(url, options)
    .then((res) => res.json())
    .then((resData) => {
      return Promise.resolve({
        ...resData,
        total: resData.sum,
        success: resData.ok,
        errorMessage: resData.message,
      });
    });
};

// 使用时
<ProTable request={request('/list')} />;

```

--------------------------------

### ProLayout API

Source: https://procomponents.ant.design/components/layout/index

This section details the API for the ProLayout component, including all available props, their types, default values, and descriptions.

```APIDOC
## ProLayout API

### Description
ProLayout offers a standard and flexible backend layout solution. It includes features for switching layout styles and automatically generating menus. When used with `PageContainer`, it can automatically generate breadcrumbs and page titles, and provides a low-cost way to integrate a footer toolbar.

### Method
React Component

### Endpoint
`ProLayout`

### Parameters
#### Props
- **title** (`ReactNode`) - Optional - The title displayed in the top-left corner of the layout. Default: `'Ant Design Pro'`
- **logo** (`ReactNode`) - Optional - The URL for the logo in the top-left corner of the layout. Default: `()=> ReactNode`
- **pure** (`boolean`) - Optional - If true, removes all built-in UI elements.
- **loading** (`boolean`) - Optional - Controls the loading state of the layout.
- **location** (`history.location`) - Optional - Location information for the current application session. If you have a custom history object, you must specify this prop. Default: `isBrowser ? window.location : undefined`
- **appList** (`{ icon, title, desc, url, target, children }[]`) - Optional - A list of cross-site navigation items.
- **appListRender** (`(props: AppListProps, defaultDom: React.ReactNode) => ReactNode`) - Optional - A render function to customize the display of the cross-site navigation list.
- **menuHeaderRender** (`(logo,title)=>ReactNode`) - Optional - Renders the logo and title. Has higher priority than `headerTitleRender`. Default: `(logo,title)=>ReactNode`
- **menuFooterRender** (`(menuProps)=>ReactNode`) - Optional - Renders a block at the bottom of the layout.
- **onMenuHeaderClick** (`(e: React.MouseEvent<HTMLDivElement>) => void`) - Optional - Click event handler for the menu header.
- **menuExtraRender** (`(menuProps)=>ReactNode`) - Optional - Renders an area below the menu title.
- **onTopMixMenuHeaderClick** (`(e: React.MouseEvent<HTMLDivElement>) => void`) - Optional - Click event handler for the header in mix mode.
- **contentStyle** (`CSSProperties`) - Optional - Style object for the layout's content area.
- **layout** (`'side' | 'top' | 'mix'`) - Optional - The layout mode for the menu. `'side'` for right-side navigation, `'top'` for top navigation, `'mix'` for mixed mode. Default: `'side'`
- **contentWidth** (`'Fluid' | 'Fixed'`) - Optional - The content mode for the layout. `'Fluid'` for adaptive width, `'Fixed'` for a fixed width of 1200px. Default: `'Fluid'`
- **actionRef** (`MutableRefObject<ActionType>`) - Optional - A ref object for common layout actions, such as refreshing the menu.
- **fixedHeader** (`boolean`) - Optional - Whether to fix the header to the top. Default: `false`
- **fixSiderbar** (`boolean`) - Optional - Whether to fix the sidebar. Default: `false`
- **breakpoint** (`Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }`) - Optional - The breakpoint at which to trigger responsive layout changes. Default: `'lg'`
- **menu** (`menuConfig`) - Optional - Configuration for the menu. Currently only supports `locale` to disable built-in internationalization. Default: `{ locale: true }`
- **iconfontUrl** (`URL`) - Optional - Configuration for using IconFont icons.
- **locale** (`'zh-CN' | 'zh-TW' | 'en-US'`) - Optional - The current language setting for the layout. Default: `navigator.language`
- **settings** (`Settings`) - Optional - Layout settings.
- **siderWidth** (`number`) - Optional - The width of the sidebar menu. Default: `208`
- **suppressSiderWhenMenuEmpty** (`boolean`) - Optional - Hides the Sider when the menu is empty.
- **defaultCollapsed** (`boolean`) - Optional - The default collapsed state of the menu, affected by `breakpoint`. Effective when `breakpoint` is `false`. 
- **collapsed** (`boolean`) - Optional - Controls the collapsed state of the menu.
- **onCollapse** (`(collapsed: boolean) => void`) - Optional - Event handler for menu collapse/expand.
- **onPageChange** (`(location: Location) => void`) - Optional - Triggered when the page changes.
- **headerRender** (`(props: ProLayoutProps) => ReactNode`) - Optional - Custom render function for the header.
- **headerTitleRender** (`(logo,title,props)=>ReactNode`) - Optional - Custom render function for the header title. Effective in mix and top modes.
- **headerContentRender** (`(props: ProLayoutProps) => ReactNode`) - Optional - Custom render function for the header content.
- **avatarProps** (`AvatarProps`) - Optional - Settings for the layout's avatar, placed in different positions depending on the layout.
- **actionsRender** (`(layoutProps)=>ReactNode[]`) - Optional - Custom render function for action items.
- **collapsedButtonRender** (`(collapsed: boolean) => ReactNode`) - Optional - Custom render function for the collapsed button.
- **footerRender** (`(props: ProLayoutProps) => JSX.Element | false`) - Optional - Custom render function for the footer.
- **pageTitleRender** (`(props: ProLayoutProps) => string`) - Optional - Custom render function for displaying the page title.
- **menuRender** (`(props: HeaderViewProps) => ReactNode`) - Optional - Custom render function for the menu.
- **postMenuData** (`(menuData: MenuDataItem[]) => MenuDataItem[]`) - Optional - Inspect and modify menu data before display. Modifications do not trigger re-renders.
- **menuItemRender** (`(itemProps: MenuDataItem, defaultDom: React.ReactNode, props: BaseMenuProps) => ReactNode`) - Optional - Custom render function for menu items.
- **subMenuItemRender** (`(itemProps: MenuDataItem) => ReactNode`) - Optional - Custom render function for menu items with submenus.
- **menuDataRender** (`(menuData: MenuDataItem[]) => MenuDataItem[]`) - Optional - Render function for `menuData` used to customize `menuData`.
- **breadcrumbRender** (`(route)=>route`) - Optional - Customizes the breadcrumb data.
- **breadcrumbProps** (`breadcrumbProps`) - Optional - Props passed to the Ant Design `Breadcrumb` component. Refer to Breadcrumbs.
- **route** (`route`) - Optional - Used to generate menus and breadcrumbs. Umi's `Layout` automatically includes this.
- **disableMobile** (`boolean`) - Optional - Disables automatic switching to mobile layout. Default: `false`
- **ErrorBoundary** (`ReactNode`) - Optional - Built-in error handling to prevent blank screens. Set to `false` to disable the default error boundary. Default: Built-in ErrorBoundary.
- **links** (`ReactNode[]`) - Optional - Quick actions displayed in the bottom-right corner of the menu.
- **menuProps** (`MenuProps`) - Optional - Props passed to the Ant Design `Menu` component. Refer to Navigation Menus.
- **waterMarkProps** (`WaterMarkProps`) - Optional - Configures watermarks. Watermarks are a feature of `PageContainer`, and `layout` just passes them through.

### Request Example
```json
{
  "title": "My App",
  "logo": "/logo.png",
  "layout": "side",
  "fixedHeader": true,
  "menuDataRender": () => [
    {
      "path": "/dashboard",
      "name": "Dashboard"
    }
  ]
}
```

### Response
#### Success Response (200)
- **ProLayoutProps** - The component renders the layout based on the provided props.

#### Response Example
(No specific response body, as ProLayout is a React component that renders UI elements.)
```

--------------------------------

### Ant Design Pro Layout Settings Interface

Source: https://procomponents.ant.design/components/layout/index

Defines the structure for layout settings in Ant Design Pro. This interface specifies properties for primary color, layout mode, content width, fixed headers and sidebars, internationalization, PWA support, and custom iconfont URLs.

```ts
// 可以通过 import { Settings } from '@ant-design/pro-layout/defaultSettings' 
// 来获取这个类型
export interface Settings {
  /** Primary color of ant design */
  colorPrimary: 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;
}
```

--------------------------------

### Ant Design Pro Default Footer Component

Source: https://procomponents.ant.design/components/layout/index

Demonstrates the usage of the `DefaultFooter` component from Ant Design Pro Components. This component is used to display copyright information and navigation links, supporting customization of links with targets and icons.

```tsx
import { GithubOutlined } from '@ant-design/icons';
import { DefaultFooter } from '@ant-design/pro-components';

<DefaultFooter
  copyright="@2019 蚂蚁金服体验技术部出品"
  links={[
    {
      key: 'Ant Design Pro',
      title: 'Ant Design Pro',
      href: 'https://pro.ant.design',
      blankTarget: true,
    },
    {
      key: 'github',
      title: <GithubOutlined />,
      href: 'https://github.com/ant-design/ant-design-pro',
      blankTarget: true,
    },
    {
      key: 'Ant Design',
      title: 'Ant Design',
      href: 'https://ant.design',
      blankTarget: true,
    },
  ]} 
/>;
```

--------------------------------

### MenuDataItem Interface for UmiJS Integration

Source: https://procomponents.ant.design/components/layout/index

This interface defines the structure for menu data when using ProLayout with UmiJS. It extends Umi's router configuration with properties like `icon`, `locale`, `hideInMenu`, and `name` to facilitate automatic menu generation. These properties allow for centralized configuration of menu items within `config.ts`.

```typescript
export interface MenuDataItem {
  /** @name 子菜单 */
  children?: MenuDataItem[];
  /** @name 在菜单中隐藏子节点 */
  hideChildrenInMenu?: boolean;
  /** @name 在菜单中隐藏自己和子节点 */
  hideInMenu?: boolean;
  /** @name 在面包屑中隐藏 */
  hideInBreadcrumb?: boolean;
  /** @name 菜单的icon */
  icon?: React.ReactNode;
  /** @name 自定义菜单的国际化 key */
  locale?: string | false;
  /** @name 菜单的名字 */
  name?: string;
  /** @name 用于标定选中的值，默认是 path */
  key?: string;
  /** @name disable 菜单选项 */
  disabled?: boolean;
  /** @name 路径,可以设定为网页链接 */
  path?: string;
  /**
   * @deprecated 当此节点被选中的时候也会选中 parentKeys 的节点
   * @name 自定义父节点
   */
  parentKeys?: string[];
  /** @name 隐藏自己，并且将子节点提升到与自己平级 */
  flatMenu?: boolean;
  /** @name 指定外链打开形式，同a标签 */
  target?: string;

  [key: string]: any;
}
```

--------------------------------

### Configure Global Network Request Adaptor with UmiJS

Source: https://procomponents.ant.design/components/layout/components

This configuration demonstrates how to set up a global request adaptor in UmiJS's `app.tsx` to transform backend data into the format expected by ProComponents. It customizes the error handling and data structure (total, success, errorMessage) for network responses, simplifying the integration of ProTable and ProList with custom backend APIs.

```typescript
import { request, RequestConfig } from 'umi';

export const request: RequestConfig = {
  errorConfig: {
    adaptor: (resData) => {
      // resData 是我们自己的数据
      return {
        ...resData,
        total: resData.sum,
        success: resData.ok,
        errorMessage: resData.message,
      };
    },
  },
};

<ProTable request={request('/list')} />;

```

--------------------------------

### Ant Design Color List Configuration

Source: https://procomponents.ant.design/components/layout/index

Defines a list of predefined color options for UI elements, often used in theming or color pickers. Each object specifies a key, a hex color code, and an optional tooltip title.

```tsx
const colorList = [
  { key: 'daybreak', color: '#1890ff' },
  { key: 'dust', color: '#F5222D' },
  { key: 'volcano', color: '#FA541C' },
  { key: 'sunset', color: '#FAAD14' },
  { key: 'cyan', color: '#13C2C2' },
  { key: 'green', color: '#52C41A' },
  { key: 'geekblue', color: '#2F54EB' },
  { key: 'purple', color: '#722ED1' },
];
```

--------------------------------

### Generating MenuData and Breadcrumb from Routes

Source: https://procomponents.ant.design/components/layout/index

This JavaScript function generates menu data and breadcrumb information based on provided route configurations. It requires routes, menu settings, a formatting function for internationalization, and an optional menu data renderer.

```js
import { getMenuData } from '@ant-design/pro-components';

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

--------------------------------

### Ant Design Pro Route Interface

Source: https://procomponents.ant.design/components/layout/index

Defines the structure for route configurations in Ant Design Pro. This interface specifies the path for a route and an array of child routes, each with properties like name, path, and optional nested children.

```ts
// 可以通过 import { RouterTypes } from '@ant-design/pro-layout/lib/typings';
// 来获取这个类型
export interface Route {
  path: string;
  children: Array<{ 
    exact?: boolean;
    emoji: string;
    name: string;
    path: string;
    // 可选二级菜单
    children?: Route['children'];
  }>;
}
```

--------------------------------

### MenuDataItem Interface Definition (TypeScript)

Source: https://procomponents.ant.design/components/layout/index

Defines the structure for menu data items in ProLayout. It includes properties like name, icon, path, and children, along with options for hiding items in the menu or for children. This interface is crucial for customizing menu display and behavior.

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

--------------------------------

### Ant Design Pro Menu Data Item Interface

Source: https://procomponents.ant.design/components/layout/index

Defines the structure for individual menu items in Ant Design Pro. This interface includes properties for authority, children menus, visibility controls, icons, locale, name, and path, along with support for additional arbitrary properties.

```ts
// 可以通过 import { MenuDataItem } from '@ant-design/pro-components'
// 来获取这个类型
export interface MenuDataItem {
  authority?: string[] | string;
  children?: MenuDataItem[];
  hideChildrenInMenu?: boolean;
  hideInMenu?: boolean;
  icon?: string;
  locale?: string;
  name?: string;
  path: string;

  [key: string]: any;
}
```

--------------------------------

### Generating Page Title from MenuData

Source: https://procomponents.ant.design/components/layout/index

This JavaScript utility function generates the page title by processing menu data, breadcrumbs, and other configuration options. It takes the current pathname, breadcrumb data, menu settings, a base title, and a formatting function as input.

```js
import { getPageTitle } from '@ant-design/pro-components';

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

--------------------------------

### GridContent Usage in React

Source: https://procomponents.ant.design/components/layout/index

GridContent is a syntactic sugar that encapsulates ProLayout's `contentWidth` configuration. It simplifies handling fixed-width (max 1200px) and fluid content layouts. It automatically manages the logic for equal and fluid width modes.

```tsx
<GridContent>{children}</GridContent>
```

--------------------------------

### Define Data Structure for ProTable/ProList

Source: https://procomponents.ant.design/components/layout/components

This TypeScript snippet defines the expected data structure for ProTable and ProList components, including data array, current page, success status, and total number of items. This structure is crucial for the components to correctly process and display data, especially when integrated with network request libraries.

```typescript
const msg: {
  data: T[];
  page: number;
  success: boolean;
  total: number;
} = {
  data: [],
  page: 1,
  success: true,
  total: 0,
};

```

--------------------------------

### Consuming RouteContext in React

Source: https://procomponents.ant.design/components/layout/index

RouteContext provides access to ProLayout's internal data such as `isMobile`, `hasHeader`, `hasSiderMenu`, and `collapsed`. This allows for custom behaviors based on the layout state. Components like PageContainer and FooterToolbar rely on RouteContext for their functionality.

```tsx
import { RouteContext, RouteContextType } from '@ant-design/pro-components';

const Page = () => (
  <RouteContext.Consumer>
    {(value: RouteContextType) => {
      const { isMobile, hasHeader, hasSiderMenu, collapsed } = value;
      // 用户的标题
      return value.title;
    }}
  </RouteContext.Consumer>
);
```
Tokens:
Raw