PageContainer - Page Container

PageContainer is a page container component that provides a unified page layout structure. It includes standardized page elements such as page title, breadcrumb navigation, and page operation area, allowing you to quickly build pages with consistent layouts.

Automatically handles page title and breadcrumb navigation
Supports page-level operation buttons and toolbars
Provides standardized page layout structure
Supports advanced features like watermarks and loading states

When to Use

When you need unified page title and breadcrumb navigation
When you need page-level operation buttons
When you need standardized page layout
When you need page-level loading states
When you need page watermark functionality

Code Demo

Basic Usage

import { EllipsisOutlined } from '@ant-design/icons';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Button, Dropdown, message } from 'antd';

const Demo = () => (
  <div
    style={{
      background: '#F5F7FA',
    }}
  >
    <PageContainer
      onBack={()=>{}}
      header={{
        title: 'Page Title',
        ghost: true,
        breadcrumb: {
          items: [
            {
              path: '',
              title: 'Primary page',
            },
            {
              path: '',
              title: 'Secondary page',
            },
            {
              path: '',
              title: 'Current page',
            },
          ],
        },
        extra: [
          <Button key="1">Secondary button</Button>,
          <Button key="2">Secondary button</Button>,
          <Button key="3" type="primary">
            Primary button
          </Button>,
          <Dropdown
            key="dropdown"
            trigger={['click']}
            menu={{
              items: [
                {
                  label: 'Dropdown menu',
                  key: '1',
                },
                {
                  label: 'Dropdown menu 2',
                  key: '2',
                },
                {
                  label: 'Dropdown menu 3',
                  key: '3',
                },
              ],
            }}
          >
            <Button key="4" style={{ padding: '0 8px' }}>
              <EllipsisOutlined />
            </Button>
          </Dropdown>,
        ],
      }}
      tabBarExtraContent="Test tabBarExtraContent"
      tabList={[
        {
          tab: 'Basic information',
          key: 'base',
          closable: false,
        },
        {
          tab: 'Detailed information',
          key: 'info',
        },
      ]}
      tabProps={{
        type: 'editable-card',
        hideAdd: true,
        onEdit: (_targetKey, action) => {
          message.info(`tab ${action}`);
        },
      }}
      footer={[
        <Button key="3">Reset</Button>,
        <Button key="2" type="primary">
          Submit
        </Button>,
      ]}
    >
      <ProCard direction="column" ghost gutter={[0, 16]}>
        <ProCard style={{ height: 200 }} />
        <ProCard gutter={16} ghost style={{ height: 200 }}>
          <ProCard colSpan={16} />
          <ProCard colSpan={8} />
        </ProCard>
      </ProCard>
    </PageContainer>
  </div>
);

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Fixed Header

import { PageContainer, ProCard } from '@ant-design/pro-components';

const Demo = () => (
  <div
    style={{
      background: '#F5F7FA',
    }}
  >
    <PageContainer
      fixedHeader
      header={{
        title: 'Page Title',
        breadcrumb: {
          items: [
            {
              path: '',
              title: 'Primary page',
            },
            {
              path: '',
              title: 'Secondary page',
            },
            {
              path: '',
              title: 'Current page',
            },
          ],
        },
      }}
      tabList={[
        {
          tab: 'Selected',
          key: '1',
        },
        {
          tab: 'Clickable',
          key: '2',
        },
        {
          tab: 'Disabled',
          key: '3',
          disabled: true,
        },
      ]}
    >
      <ProCard direction="column" ghost gutter={[0, 16]}>
        <ProCard style={{ height: 200 }} />
        <ProCard gutter={16} ghost>
          <ProCard colSpan={16} style={{ height: 200 }} />
          <ProCard colSpan={8} style={{ height: 200 }} />
        </ProCard>
        <ProCard gutter={16} ghost>
          <ProCard colSpan={8} style={{ height: 200 }} />
          <ProCard colSpan={16} style={{ height: 200 }} />
        </ProCard>
      </ProCard>
    </PageContainer>
  </div>
);

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Hide Breadcrumb

import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Descriptions } from 'antd';

const Demo = () => (
  <div
    style={{
      background: '#F5F7FA',
    }}
  >
    <PageContainer
      ghost
      header={{
        title: 'Page Title',
        breadcrumb: {},
      }}
      content={
        <Descriptions column={2} style={{ marginBlockEnd: -16 }}>
          <Descriptions.Item label="Creator">逄一</Descriptions.Item>
          <Descriptions.Item label="Associated form">
            <a>421421</a>
          </Descriptions.Item>
          <Descriptions.Item label="Creation Date">
            2017-01-10
          </Descriptions.Item>
          <Descriptions.Item label="Document remarks">
            浙江省杭州市西湖区工专路
          </Descriptions.Item>
        </Descriptions>
      }
    >
      <ProCard direction="column" ghost gutter={[0, 16]}>
        <ProCard style={{ height: 200 }} />
        <ProCard gutter={16} ghost style={{ height: 200 }}>
          <ProCard colSpan={16} />
          <ProCard colSpan={8} />
        </ProCard>
      </ProCard>
    </PageContainer>
  </div>
);

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

API

PageContainer

Parameter	Description	Type	Default
title	Page title, set false to hide	`ReactNode \| false`	-
subTitle	Page subtitle	`ReactNode`	-
extra	Page operation area	`ReactNode`	-
extraContent	Extra content beside the operation area	`ReactNode`	-
content	Page content	`ReactNode`	-
footer	Footer toolbar (items aligned right)	`ReactNode[]`	-
loading	Loading state	`boolean \| SpinProps \| ReactNode`	false
header	Header configuration	`Partial<PageHeaderProps> & { children?: ReactNode }`	-
pageHeaderRender	Custom pageHeader, return false to hide	`(props: PageContainerProps) => ReactNode \| false`	-
affixProps	Affix configuration, same as antd	`Omit<AffixProps, 'children'>`	-
breadcrumb	Breadcrumb configuration	`BreadcrumbProps`	-
breadcrumbRender	Custom breadcrumb rendering, return false to hide	`PageHeaderProps['breadcrumbRender'] \| false`	-
waterMarkProps	Watermark configuration	`WatermarkProps`	-
token	Custom token	`pageContainerToken`	-
stylish	Style configuration	`GenerateStyle<PageContainerToken>`	-
footerStylish	Footer style configuration	`GenerateStyle<PageContainerToken>`	-
footerToolBarProps	Footer toolbar configuration	`FooterToolbarProps`	-
tabList	Tab configuration (passed to PageHeader tabs)	`(TabPaneProps & { key?: React.Key })[]`	-
tabActiveKey	Currently active tab	`TabsProps['activeKey']`	-
onTabChange	Tab change callback	`TabsProps['onChange']`	-
tabBarExtraContent	Extra area on the tab bar	`TabsProps['tabBarExtraContent']`	-
tabProps	Other tabs configs	`TabsProps`	-
fixedHeader	Fix PageHeader to the top of the page	`boolean`	-
children	Children	`ReactNode`	-

PageHeaderProps

Parameter	Description	Type	Default
title	Title	`ReactNode`	-
subTitle	Subtitle	`ReactNode`	-
extra	Operation area	`ReactNode`	-
breadcrumb	Breadcrumb	`BreadcrumbProps`	-
tags	Tags	`TagProps[]`	-
avatar	Avatar	`AvatarProps`	-
backIcon	Back icon	`ReactNode`	-
onBack	Back event	`() => void`	-

Design Guidelines

PageContainer provides standardized page layout, ensuring consistency in page structure across the entire application. It follows Ant Design design guidelines, providing a consistent user experience.

Creator逄一	Associated form421421
Creation Date2017-01-10	Document remarks浙江省杭州市西湖区工专路

#PageContainer - Page Container

#When to Use

#Code Demo

#API

#PageContainer

#PageHeaderProps

#Design Guidelines