or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

context-state.mdfooter-toolbar.mdhelp-system.mdindex.mdlayout-configuration.mdmain-layout.mdpage-components.mdutilities.md
tile.json

tessl/npm-ant-design--pro-layout

Standard, yet flexible, middle and backend layout component for React applications with Ant Design integration

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ant-design/pro-layout@7.22.x

To install, run

npx @tessl/cli install tessl/npm-ant-design--pro-layout@7.22.0

index.mddocs/

Pro Layout

Pro Layout is a comprehensive enterprise-grade layout component for React applications built with Ant Design. It provides a standardized yet flexible middle and backend layout solution with automatic menu generation from route configurations, one-click layout switching capabilities, breadcrumb generation, page headers, and footer toolbar integration.

Package Information

  • Package Name: @ant-design/pro-layout
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ant-design/pro-layout

Core Imports

import ProLayout from "@ant-design/pro-layout";

For named imports:

import {
  ProLayout,
  PageContainer,
  FooterToolbar,
  SettingDrawer,
  WaterMark,
  getPageTitle,
  getMenuData
} from "@ant-design/pro-layout";

For CommonJS:

const ProLayout = require("@ant-design/pro-layout");
const { PageContainer, FooterToolbar } = require("@ant-design/pro-layout");

Basic Usage

import React from "react";
import ProLayout from "@ant-design/pro-layout";
import type { MenuDataItem } from "@ant-design/pro-layout";

const menuData: MenuDataItem[] = [
  {
    path: "/dashboard",
    name: "Dashboard",
    icon: "DashboardOutlined",
  },
  {
    path: "/users",
    name: "Users",
    icon: "UserOutlined",
  },
];

function App() {
  return (
    <ProLayout
      title="My Admin App"
      menu={{ request: async () => menuData }}
      route={{
        children: menuData,
      }}
    >
      <div>Your page content here</div>
    </ProLayout>
  );
}

Architecture

Pro Layout is built around several key architectural components:

  • Core Layout System: The main ProLayout component manages overall layout structure including sidebar, header, and footer
  • Page Management: PageContainer provides standardized page content with headers, breadcrumbs, and tabs
  • Context System: RouteContext shares layout state and configuration across all components
  • Settings System: Comprehensive theme and layout configuration with SettingDrawer for runtime customization
  • Utility Functions: Helper functions for page titles, menu data processing, and route handling
  • Component Ecosystem: Specialized components for footers, headers, toolbars, and content areas

Capabilities

Main Layout Component

The core ProLayout component providing enterprise-grade layout with sidebar navigation, responsive design, and comprehensive customization options.

function ProLayout(props: ProLayoutProps): React.ReactElement;

interface ProLayoutProps {
  /** Minimal mode without layout chrome */
  pure?: boolean;
  /** Logo configuration */
  logo?: React.ReactNode | false | (() => React.ReactNode);
  /** Page change callback */
  onPageChange?: (location?: { pathname?: string }) => void;
  /** Global loading state */
  loading?: boolean;
  /** Sidebar collapse state */
  collapsed?: boolean;
  /** Collapse state handler */
  onCollapse?: (collapsed: boolean) => void;
  /** Layout settings */
  layout?: 'side' | 'top' | 'mix';
  /** Navigation theme */
  navTheme?: 'realDark' | 'light';
  /** Content width mode */
  contentWidth?: 'Fluid' | 'Fixed';
  /** Footer render function */
  footerRender?: WithFalse<(props: any) => React.ReactNode>;
  /** Breadcrumb render function */
  breadcrumbRender?: WithFalse<(routers: any[]) => React.ReactNode>;
  /** Menu configuration */
  menu?: MenuConfig;
  /** Route configuration */
  route?: Route;
  /** Layout title */
  title?: string | false;
  children?: React.ReactNode;
}

interface MenuConfig {
  /** Internationalization */
  locale?: boolean;
  /** Default open all menus */
  defaultOpenAll?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Async menu data request */
  request?: (params: any, defaultMenuData: MenuDataItem[]) => Promise<MenuDataItem[]>;
  /** Menu type */
  type?: 'sub' | 'group';
}

Main Layout

Page Components

Page-level components for content containers, headers, and page structure management.

function PageContainer(props: PageContainerProps): React.ReactElement;

interface PageContainerProps {
  /** Page title */
  title?: React.ReactNode | false;
  /** Page description content */
  content?: React.ReactNode;
  /** Extra content area */
  extraContent?: React.ReactNode;
  /** Loading configuration */
  loading?: boolean | SpinProps | React.ReactNode;
  /** Header configuration */
  header?: Partial<PageHeaderProps>;
  /** Custom header renderer */
  pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>;
  /** Breadcrumb renderer */
  breadcrumbRender?: ((route: any, params: any, routes: any[], paths: any[]) => React.ReactNode) | false;
  /** Watermark configuration */
  waterMarkProps?: WaterMarkProps;
  children?: React.ReactNode;
}

Page Components

Layout Configuration

Settings and configuration system for themes, layout modes, and runtime customization.

interface ProSettings {
  /** Navigation theme */
  navTheme?: 'realDark' | 'light';
  /** Layout type */
  layout?: 'side' | 'top' | 'mix';
  /** Content width mode */
  contentWidth?: 'Fluid' | 'Fixed';
  /** Fixed header */
  fixedHeader?: boolean;
  /** Fixed sidebar */
  fixSiderbar?: boolean;
  /** Menu configuration */
  menu?: MenuSettings;
  /** Layout title */
  title?: string | false;
  /** Custom icon font URL */
  iconfontUrl?: string;
  /** Primary brand color */
  colorPrimary?: string;
  /** Split menu mode (mix layout only) */
  splitMenus?: boolean;
}

function SettingDrawer(props: SettingDrawerProps): React.ReactElement;

Layout Configuration

Footer and Toolbar Components

Footer components and toolbar utilities for actions and navigation.

function FooterToolbar(props: FooterToolbarProps): React.ReactElement;

interface FooterToolbarProps {
  /** Extra content area */
  extra?: React.ReactNode;
  /** Custom content renderer */
  renderContent?: (props: FooterToolbarProps & RouteContextType & { leftWidth?: string }, dom: JSX.Element) => React.ReactNode;
  /** Portal rendering */
  portalDom?: boolean;
  children?: React.ReactNode;
}

function DefaultFooter(props: FooterProps): React.ReactElement;

Footer and Toolbar

Context and State Management

Context providers and state management for sharing layout configuration and route information.

const RouteContext: React.Context<RouteContextType>;

interface RouteContextType {
  /** Breadcrumb configuration */
  breadcrumb?: Record<string, MenuDataItem>;
  /** Menu data array */
  menuData?: MenuDataItem[];
  /** Mobile device detection */
  isMobile?: boolean;
  /** Sidebar collapse state */
  collapsed?: boolean;
  /** Sidebar visibility */
  hasSiderMenu?: boolean;
  /** Header visibility */
  hasHeader?: boolean;
  /** Sidebar width */
  siderWidth?: number;
  /** Page title information */
  pageTitleInfo?: PageTitleInfo;
  /** Matched menu items */
  matchMenus?: MenuDataItem[];
  /** Current active menu */
  currentMenu?: MenuDataItem;
}

Context and State

Utility Functions

Helper functions for page titles, menu processing, and common layout operations.

function getPageTitle(props: GetPageTitleProps, ignoreTitle?: boolean): string;

interface GetPageTitleProps {
  pathname?: string;
  breadcrumb?: Record<string, MenuDataItem>;
  menu?: MenuDataItem[];
  title?: string;
  pageName?: string;
}

function getMenuData(
  routes: Route[],
  menu?: any,
  formatMessage?: any,
  menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[]
): {
  breadcrumb: Record<string, MenuDataItem>;
  breadcrumbMap: Map<string, MenuDataItem>;
  menuData: MenuDataItem[];
};

Utility Functions

Help System

Comprehensive help and documentation system components.

function ProHelp<ValueType = any>(props: ProHelpProps<ValueType>): React.ReactElement;

interface ProHelpProps<ValueType> {
  /** Help data source */
  dataSource: ProHelpDataSource[];
  /** Value type mapping for custom rendering */
  valueTypeMap?: Map<string, any>;
  /** Async content loader */
  onLoadContext?: (dataSource: ProHelpDataSource) => Promise<any>;
  children?: React.ReactNode;
}

Help System

Types

Core Types

interface MenuDataItem {
  /** Child menu items */
  children?: MenuDataItem[];
  /** Hide children in menu */
  hideChildrenInMenu?: boolean;
  /** Hide item in menu */
  hideInMenu?: boolean;
  /** Menu icon */
  icon?: React.ReactNode;
  /** Internationalization key */
  locale?: string | false;
  /** Menu item display name */
  name?: string;
  /** Unique identifier */
  key?: string;
  /** Disable menu item */
  disabled?: boolean;
  /** Route path or external URL */
  path?: string;
  /** Parent selection keys */
  parentKeys?: string[];
  /** Link target */
  target?: string;
  /** Tooltip text */
  tooltip?: string;
  /** Flatten menu structure */
  flatMenu?: boolean;
}

interface Route {
  children?: Route[];
  /** Menu item properties */
  [key: string]: any;
}

type WithFalse<T> = T | false;

interface WaterMarkProps {
  /** Horizontal gap between marks */
  gapX?: number;
  /** Vertical gap between marks */
  gapY?: number;
  /** Z-index value */
  zIndex?: number;
  /** Watermark width */
  width?: number;
  /** Watermark height */
  height?: number;
  /** Rotation angle in degrees */
  rotate?: number;
  /** Image source URL */
  image?: string;
  /** Text content */
  content?: string | string[];
  /** Font color */
  fontColor?: string;
  /** Font size */
  fontSize?: number;
}

Default Configuration

const defaultSettings: ProSettings = {
  navTheme: 'light',
  layout: 'side',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  iconfontUrl: '',
  colorPrimary: '#1677FF',
  splitMenus: false,
};