@ant-design/pro-layout

  • Version 7.19.7
  • Published
  • 891 kB
  • 14 dependencies
  • MIT license

Install

npm i @ant-design/pro-layout
yarn add @ant-design/pro-layout
pnpm add @ant-design/pro-layout

Overview

@ant-design/pro-layout

Index

Variables

variable DefaultFooter

const DefaultFooter: React.FC<FooterProps>;

    variable DefaultHeader

    const DefaultHeader: React.FC<
    {
    collapsed?: boolean;
    onCollapse?: (collapsed: boolean) => void;
    isMobile?: boolean;
    logo?: React.ReactNode;
    menuRender?: WithFalse<
    (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
    >;
    rightContentRender?: WithFalse<(props: HeaderViewProps) => React.ReactNode>;
    className?: string;
    prefixCls?: string;
    appList?: AppListProps;
    itemClick?: (
    item: AppItemProps,
    popoverRef?: React.RefObject<HTMLSpanElement>
    ) => void;
    menuData?: MenuDataItem[];
    onMenuHeaderClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
    style?: React.CSSProperties;
    menuHeaderRender?: WithFalse<
    (
    logo: React.ReactNode,
    title: React.ReactNode,
    props?: SiderMenuProps
    ) => React.ReactNode
    >;
    headerContentRender?: WithFalse<
    (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
    >;
    collapsedButtonRender?: WithFalse<
    (collapsed?: boolean, defaultDom?: React.ReactNode) => React.ReactNode
    >;
    splitMenus?: boolean;
    actionsRender?: WithFalse<(props: HeaderViewProps) => any>;
    avatarProps?: any;
    children?: React.ReactNode;
    } & Partial<PureSettings> & {
    isMobile?: boolean;
    logo?: React.ReactNode;
    headerRender?: WithFalse<
    (
    props: HeaderViewProps,
    defaultDom: React.ReactNode
    ) => React.ReactNode
    >;
    headerTitleRender?: WithFalse<
    (
    logo: React.ReactNode,
    title: React.ReactNode,
    props: HeaderViewProps
    ) => React.ReactNode
    >;
    headerContentRender?: WithFalse<
    (
    props: HeaderViewProps,
    defaultDom: React.ReactNode
    ) => React.ReactNode
    >;
    siderWidth?: number;
    hasSiderMenu?: boolean;
    } & PrivateSiderMenuProps
    >;

      variable FooterToolbar

      const FooterToolbar: React.FC<FooterToolbarProps>;

        variable GridContent

        const GridContent: React.FC<GridContentProps>;
        • This component can support contentWidth so you don't need to calculate the width contentWidth=Fixed, width will is 1200

          Parameter props

        variable PageContainer

        const PageContainer: React.FC<PageContainerProps>;
          const PageHeader: React.FC<PageHeaderProps>;

            variable PageLoading

            const PageLoading: React.FC<any>;

              variable ProBreadcrumb

              const ProBreadcrumb: React.FC<BreadcrumbProps>;
              • 配置与面包屑相同,只是增加了自动根据路由计算面包屑的功能。此功能必须要在 ProLayout 中使用。

                Parameter props

                Returns

              variable ProHelpContentPanel

              const ProHelpContentPanel: React.FC<ProHelpContentPanelProps>;
              • 控制具体的帮助文档显示组件 selectedKey 来展示对应的内容。它会根据不同的item.valueType值来展示不同的内容,包括标题、图片、超链接等。

                Parameter ProHelpContentPanelProps

                Returns

              variable ProHelpDrawer

              const ProHelpDrawer: React.FC<ProHelpDrawerProps>;
              • 渲染一个抽屉,其中显示了一个 ProHelpPanel。

                Parameter drawerProps

                要传递给 Drawer 组件的属性。

                Parameter props

                要传递给 ProHelpPanel 组件的属性。

              variable ProHelpModal

              const ProHelpModal: React.FC<ProHelpModalProps>;
              • 渲染一个模态对话框,其中显示了一个 ProHelpPanel。

                Parameter modalProps

                要传递给 Modal 组件的属性。

                Parameter props

                要传递给 ProHelpPanel 组件的属性。

              variable ProHelpPanel

              const ProHelpPanel: React.FC<ProHelpPanelProps>;
              • ProHelpPanel 组件是一个帮助中心面板组件,具有可折叠的左侧菜单和右侧帮助内容区域。 左侧菜单显示了帮助文档的目录结构,右侧帮助内容区域显示了用户选中的帮助文档内容。 在左侧菜单中,用户可以通过点击目录来选择并显示相应的文档内容。

                Parameter param0

                Returns

              variable ProHelpPopover

              const ProHelpPopover: React.FC<ProHelpPopoverProps>;
              • 渲染一个弹出式提示框,其中显示了一个ProHelpContentPanel,展示帮助文案的详情

                Parameter popoverProps

                要传递给 Drawer 组件的属性。

                Parameter props

                要传递给 ProHelpPanel 组件的属性。

              variable ProHelpProvide

              const ProHelpProvide: React.Context<{
              dataSource: ProHelpDataSource<any>[];
              valueTypeMap: Map<
              string,
              (item: ProHelpDataSourceChildren<any>, index: number) => React.ReactNode
              >;
              onLoadContext?: (
              key: React.Key,
              context: ProHelpDataSource<any>['children'][number]
              ) => Promise<ProHelpDataSourceChildren<any>[]>;
              }>;
              • 这段代码定义了一个名为 ProHelpProvide 的 React 上下文对象,并且指定了该上下文对象的初始值为 { dataSource: [] }。 这个上下文对象中包含了一个名为 dataSource 的属性,该属性的值是一个数组,类型为 ProHelpDataSource[]。 该上下文对象通常用于在 React 组件树中共享数据,即可以通过在组件中使用 ProHelpProvide.Provider 包裹一组组件, 将 dataSource 和 valueTypeMap 数据源传递给这些组件,这些组件即可从上下文中获取 dataSource 数据源,实现数据的共享和传递。

              variable ProHelpSelect

              const ProHelpSelect: React.FC<
              Omit<
              SelectProps,
              'onSearch' | 'optionFilterProp' | 'options' | 'filterOption'
              > & { iconClassName?: string }
              >;

                variable ProLayout

                const ProLayout: React.FC<ProLayoutProps>;

                  variable RenderContentPanel

                  const RenderContentPanel: React.FC<{
                  dataSourceChildren: ProHelpDataSourceChildren<any>[];
                  onInit?: (ref: HTMLDivElement) => void;
                  }>;

                    variable RouteContext

                    const RouteContext: React.Context<RouteContextType>;

                      variable SelectKeyProvide

                      const SelectKeyProvide: React.Context<{
                      selectedKey: string | undefined;
                      setSelectedKey: (key: string | undefined) => void;
                      }>;

                        variable SettingDrawer

                        const SettingDrawer: React.FC<SettingDrawerProps>;
                        • 可视化配置组件

                          Parameter props

                        variable TopNavHeader

                        const TopNavHeader: React.FC<TopNavHeaderProps>;

                          variable WaterMark

                          const WaterMark: React.FC<WaterMarkProps>;

                            Functions

                            function getMenuData

                            getMenuData: (
                            routes: Readonly<Route[]>,
                            menu?: { locale?: boolean },
                            formatMessage?: (message: MessageDescriptor) => string,
                            menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[]
                            ) => {
                            breadcrumb: Record<string, MenuDataItem>;
                            breadcrumbMap: Map<string, MenuDataItem>;
                            menuData: MenuDataItem[];
                            };

                              function getPageTitle

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

                                function ProHelp

                                ProHelp: <ValueTypeMap = { text: any }>({
                                dataSource,
                                valueTypeMap,
                                onLoadContext,
                                ...props
                                }: ProHelpProps<ValueTypeMap>) => any;

                                  function ProPageHeader

                                  ProPageHeader: (
                                  props: PageContainerProps & { prefixedClassName: string }
                                  ) => import('react/jsx-runtime').JSX.Element | null;

                                    Interfaces

                                    interface PageHeaderProps

                                    interface PageHeaderProps {}

                                      property avatar

                                      avatar?: AvatarProps;

                                        property backIcon

                                        backIcon?: React.ReactNode;

                                          property breadcrumb

                                          breadcrumb?: Partial<BreadcrumbProps> | React.ReactElement<typeof Breadcrumb>;

                                            property breadcrumbRender

                                            breadcrumbRender?: (
                                            props: PageHeaderProps,
                                            defaultDom: React.ReactNode
                                            ) => React.ReactNode;

                                              property children

                                              children?: React.ReactNode;

                                                property childrenContentStyle

                                                childrenContentStyle?: React.CSSProperties;

                                                  property className

                                                  className?: string;

                                                    property contentWidth

                                                    contentWidth?: ContentWidth;

                                                      property extra

                                                      extra?: React.ReactNode;

                                                        property footer

                                                        footer?: React.ReactNode;

                                                          property ghost

                                                          ghost?: boolean;

                                                            property layout

                                                            layout?: string;

                                                              property onBack

                                                              onBack?: (e?: React.MouseEvent<HTMLElement>) => void;

                                                                property prefixCls

                                                                prefixCls?: string;

                                                                  property style

                                                                  style?: React.CSSProperties;

                                                                    property subTitle

                                                                    subTitle?: React.ReactNode;

                                                                      property tags

                                                                      tags?: React.ReactElement<TagType> | React.ReactElement<TagType>[];

                                                                        property title

                                                                        title?: React.ReactNode;

                                                                          Type Aliases

                                                                          type AppItemProps

                                                                          type AppItemProps = {
                                                                          title: React.ReactNode;
                                                                          desc?: React.ReactNode;
                                                                          icon?: React.ReactNode | (() => React.ReactNode);
                                                                          url?: string;
                                                                          target?: string;
                                                                          children?: Omit<AppItemProps, 'children'>[];
                                                                          };

                                                                            type AppListProps

                                                                            type AppListProps = AppItemProps[];

                                                                              type FooterProps

                                                                              type FooterProps = {
                                                                              links?: WithFalse<
                                                                              {
                                                                              key?: string;
                                                                              title: React.ReactNode;
                                                                              href: string;
                                                                              blankTarget?: boolean;
                                                                              }[]
                                                                              >;
                                                                              copyright?: WithFalse<string>;
                                                                              style?: CSSProperties;
                                                                              className?: string;
                                                                              prefixCls?: string;
                                                                              };

                                                                                type HeaderProps

                                                                                type HeaderViewProps = GlobalHeaderProps & {
                                                                                isMobile?: boolean;
                                                                                logo?: React.ReactNode;
                                                                                headerRender?: WithFalse<
                                                                                (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
                                                                                >;
                                                                                headerTitleRender?: WithFalse<
                                                                                (
                                                                                logo: React.ReactNode,
                                                                                title: React.ReactNode,
                                                                                props: HeaderViewProps
                                                                                ) => React.ReactNode
                                                                                >;
                                                                                headerContentRender?: WithFalse<
                                                                                (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
                                                                                >;
                                                                                siderWidth?: number;
                                                                                hasSiderMenu?: boolean;
                                                                                };
                                                                                  type MenuDataItem = {
                                                                                  /** @name 子菜单 */
                                                                                  children?: MenuDataItem[];
                                                                                  routes?: undefined;
                                                                                  /** @name 在菜单中隐藏子节点 */
                                                                                  hideChildrenInMenu?: boolean;
                                                                                  /** @name 在菜单中隐藏自己和子节点 */
                                                                                  hideInMenu?: boolean;
                                                                                  /** @name 菜单的icon */
                                                                                  icon?: React.ReactNode;
                                                                                  /** @name 自定义菜单的国际化 key */
                                                                                  locale?: string | false;
                                                                                  /** @name 菜单的名字 */
                                                                                  name?: string;
                                                                                  /** @name 用于标定选中的值,默认是 path */
                                                                                  key?: string;
                                                                                  /** @name disable 菜单选项 */
                                                                                  disabled?: boolean;
                                                                                  /** @name disable menu 的 tooltip 菜单选项 */
                                                                                  disabledTooltip?: boolean;
                                                                                  /** @name 路径,可以设定为网页链接 */
                                                                                  path?: string;
                                                                                  /**
                                                                                  * 当此节点被选中的时候也会选中 parentKeys 的节点
                                                                                  *
                                                                                  * @name 自定义父节点
                                                                                  */
                                                                                  parentKeys?: string[];
                                                                                  /** @name 隐藏自己,并且将子节点提升到与自己平级 */
                                                                                  flatMenu?: boolean;
                                                                                  /** @name 指定外链打开形式,同a标签 */
                                                                                  target?: string;
                                                                                  /**
                                                                                  * menuItem 的 tooltip 显示的路径
                                                                                  */
                                                                                  tooltip?: string;
                                                                                  [key: string]: any;
                                                                                  };

                                                                                    type PageContainerProps

                                                                                    type PageContainerProps = {
                                                                                    title?: React.ReactNode | false;
                                                                                    content?: React.ReactNode;
                                                                                    extraContent?: React.ReactNode;
                                                                                    prefixCls?: string;
                                                                                    footer?: ReactNode[];
                                                                                    /**
                                                                                    * @name token 自定义的 token
                                                                                    */
                                                                                    token?: pageContainerToken;
                                                                                    /**
                                                                                    * 与 antd 完全相同
                                                                                    *
                                                                                    * @name PageHeader 的配置
                                                                                    */
                                                                                    header?: Partial<PageHeaderProps> & {
                                                                                    children?: React.ReactNode;
                                                                                    };
                                                                                    /** @name pageHeaderRender 自定义 pageHeader */
                                                                                    pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>;
                                                                                    /**
                                                                                    * 与 antd 完全相同
                                                                                    *
                                                                                    * @name affixProps 固钉的配置
                                                                                    */
                                                                                    affixProps?: Omit<AffixProps, 'children'>;
                                                                                    /**
                                                                                    * 只加载内容区域
                                                                                    *
                                                                                    * @name loading 是否加载
                                                                                    */
                                                                                    loading?: boolean | SpinProps | React.ReactNode;
                                                                                    /**
                                                                                    * 自定义 breadcrumb,
                                                                                    * @name breadcrumbRender 返回false不展示
                                                                                    */
                                                                                    breadcrumbRender?: PageHeaderProps['breadcrumbRender'] | false;
                                                                                    /** @name WaterMarkProps 水印的配置 */
                                                                                    waterMarkProps?: WaterMarkProps;
                                                                                    /** @name BreadcrumbProps 配置面包屑 */
                                                                                    breadcrumb?: BreadcrumbProps;
                                                                                    children?: React.ReactNode;
                                                                                    stylish?: GenerateStyle<PageContainerToken>;
                                                                                    footerStylish?: GenerateStyle<PageContainerToken>;
                                                                                    footerToolBarProps?: FooterToolbarProps;
                                                                                    } & PageHeaderTabConfig &
                                                                                    Omit<PageHeaderProps, 'title' | 'footer' | 'breadcrumbRender' | 'breadcrumb'>;

                                                                                      type ProHelpContentPanelProps

                                                                                      type ProHelpContentPanelProps = {
                                                                                      /**
                                                                                      * 控制当前选中的帮助文档
                                                                                      */
                                                                                      selectedKey: React.Key;
                                                                                      className?: string;
                                                                                      parentItem?: ProHelpDataSource<any>;
                                                                                      onScroll?: (key?: string) => void;
                                                                                      };

                                                                                        type ProHelpDataSource

                                                                                        type ProHelpDataSource<ValueType = 'text'> = {
                                                                                        /**
                                                                                        * key 数据源项的唯一标识
                                                                                        */
                                                                                        key: string;
                                                                                        /**
                                                                                        * title 数据源项的标题。
                                                                                        */
                                                                                        title: string;
                                                                                        /**
                                                                                        * 在一页内加载所有的 children 内容
                                                                                        */
                                                                                        infiniteScrollFull?: boolean;
                                                                                        /**
                                                                                        * children 包含子项的数组,每个子项包含一个唯一标识,标题以及子子项数组。
                                                                                        */
                                                                                        children: {
                                                                                        key: string;
                                                                                        title: string;
                                                                                        /**
                                                                                        * 是否远程加载children
                                                                                        */
                                                                                        asyncLoad?: boolean;
                                                                                        children?: ProHelpDataSourceChildren<ValueType>[];
                                                                                        }[];
                                                                                        };
                                                                                        • ProHelp 数据源类型。 ValueType 数据源项值的类型,默认为 'text'。 {string} key 数据源项的唯一标识。 {string} title 数据源项的标题。 children 包含子项的数组,每个子项包含一个唯一标识,标题以及子子项数组。

                                                                                        type ProHelpDataSourceChildren

                                                                                        type ProHelpDataSourceChildren<
                                                                                        ValueTypeMap = {
                                                                                        text: string;
                                                                                        }
                                                                                        > = {
                                                                                        /**
                                                                                        * 包含数据源子项内容的对象。
                                                                                        * @template ValueType 数据源项值的类型,默认为 'text'。
                                                                                        */
                                                                                        valueType: ValueTypeMap extends Map<infer ValueType, any>
                                                                                        ? ValueType
                                                                                        : keyof ValueTypeMap | ProHelpDataSourceChildrenType;
                                                                                        /**
                                                                                        * 数据源子项值的类型。
                                                                                        * @typedef {(ValueTypeMap | ProHelpDataSourceChildrenType)} ProHelpDataSourceChildrenType
                                                                                        */
                                                                                        children: ProHelpDataSourceContentProps<
                                                                                        ValueTypeMap,
                                                                                        keyof ValueTypeMap | ProHelpDataSourceChildrenType
                                                                                        >;
                                                                                        };
                                                                                        • ProHelp 数据源子项类型。 ValueTypeMap 数据源项值的类型,默认为 'text'。 {(ValueType | ProHelpDataSourceChildrenType)} valueType 数据源子项值的类型,可以为指定的类型,也可以是自定义类型。 {ProHelpDataSourceContentProps} children 包含数据源子项内容的对象。

                                                                                        type ProHelpDrawerProps

                                                                                        type ProHelpDrawerProps = {
                                                                                        /**
                                                                                        * Ant Design Drawer 组件的 Props,可以传递一些选项,如位置、大小、关闭方式等等。
                                                                                        */
                                                                                        drawerProps: DrawerProps;
                                                                                        } & Omit<ProHelpPanelProps, 'onClose'>;

                                                                                          type ProHelpModalProps

                                                                                          type ProHelpModalProps = {
                                                                                          /**
                                                                                          * Ant Design Modal 组件的 props,可以传递一些选项,如位置、大小、关闭方式等等。
                                                                                          */
                                                                                          modalProps?: ModalProps;
                                                                                          } & Omit<ProHelpPanelProps, 'onClose'>;

                                                                                            type ProHelpPanelProps

                                                                                            type ProHelpPanelProps = {
                                                                                            /**
                                                                                            * 帮助面板的标题
                                                                                            */
                                                                                            title?: string;
                                                                                            /**
                                                                                            * 帮助面板首次打开时的默认选中文档的键名
                                                                                            */
                                                                                            defaultSelectedKey?: string;
                                                                                            /**
                                                                                            * 当前选中的帮助文档的键名。如果提供了这个 prop,那么该组件将是一个受控组件,其状态将由父组件管理。如果未提供,那么该组件将是一个非受控组件,其状态将在组件内部管理。
                                                                                            */
                                                                                            selectedKey?: string;
                                                                                            /**
                                                                                            * 当选中的文档键名发生变化时调用的回调函数。新的键名将作为参数传递给该函数。
                                                                                            */
                                                                                            onSelectedKeyChange?: (key: string | undefined) => void;
                                                                                            /**
                                                                                            *控制左侧面板是否能够打开
                                                                                            */
                                                                                            showLeftPanel?: boolean;
                                                                                            /**
                                                                                            * 当左侧面板打开状态发生变化时调用的回调函数。新的打开状态将作为参数传递给该函数。
                                                                                            */
                                                                                            onShowLeftPanelChange?: (show: boolean) => void;
                                                                                            /**
                                                                                            * 是否显示边框
                                                                                            */
                                                                                            bordered?: boolean;
                                                                                            /**
                                                                                            * 当帮助面板关闭时调用的回调函数。
                                                                                            */
                                                                                            onClose?: () => void;
                                                                                            /**
                                                                                            * 帮助面板的高度,可以是数字或字符串类型。
                                                                                            */
                                                                                            height?: number | string;
                                                                                            /**
                                                                                            * 帮助面板的页脚
                                                                                            */
                                                                                            footer?: React.ReactNode;
                                                                                            /**
                                                                                            * 在一页内加载所有的 children 内容
                                                                                            */
                                                                                            infiniteScrollFull?: boolean;
                                                                                            /**
                                                                                            * 自定义渲染 extra 部分的内容
                                                                                            *
                                                                                            * @param {React.ReactNode} collapsePannelAction - 折叠收起的左侧按钮
                                                                                            * @param {React.ReactNode} helpSelectAction - 默认的帮助筛选按钮
                                                                                            * @param {React.ReactNode} closeAction - 关闭操作按钮
                                                                                            * @returns {React.ReactNode} - 返回自定义渲染的 extra 操作按钮
                                                                                            *
                                                                                            */
                                                                                            extraRender?: (
                                                                                            collapsePannelAction: React.ReactNode,
                                                                                            helpSelectAction: React.ReactNode,
                                                                                            closeAction: React.ReactNode
                                                                                            ) => React.ReactNode;
                                                                                            };

                                                                                              type ProHelpPopoverProps

                                                                                              type ProHelpPopoverProps = Omit<PopoverProps, 'content'> & {
                                                                                              /**
                                                                                              * 悬浮提示文字的 CSS 类名
                                                                                              */
                                                                                              textClassName?: string;
                                                                                              /**
                                                                                              * Popover 内容的 content 的 CSS 类名
                                                                                              */
                                                                                              popoverContextClassName?: string;
                                                                                              /**
                                                                                              * 悬浮提示文字的 CSS 样式对象
                                                                                              */
                                                                                              textStyle?: React.CSSProperties;
                                                                                              /**
                                                                                              * 当前选中的帮助文档的 key 值
                                                                                              */
                                                                                              selectedKey: string;
                                                                                              /**
                                                                                              * 可选的悬浮提示 Popover 组件的 Props,用于自定义悬浮提示的样式和行为。
                                                                                              * 该属性可以传递 Ant Design Popover 组件的 props,如位置、大小、触发方式等等
                                                                                              * @see 注意,content 属性已经被从 PopoverProps 中删除,因为这个属性由 ProHelpPopover 内部控制。
                                                                                              */
                                                                                              popoverProps?: PopoverProps;
                                                                                              };

                                                                                                type ProHelpProps

                                                                                                type ProHelpProps<ValueType> = {
                                                                                                /**
                                                                                                * 帮助文档的数据源,包含一组帮助文档数据,每个数据包含标题和内容等信息。
                                                                                                */
                                                                                                dataSource: ProHelpDataSource<ValueType>[];
                                                                                                /**
                                                                                                * 帮助组件的子组件,用于渲染自定义的帮助内容。
                                                                                                * 是一个键值对结构的集合,其中:
                                                                                                * 键(key)为字符串类型;
                                                                                                * 值(value)为一个函数类型,该函数接受两个参数:一个名为 item 的 ProHelpDataSourceChildren 类型的对象,表示一个 ProHelp 数据源子项的子项;
                                                                                                * 一个名为 index 的数字类型参数,表示该子项在父级子项数组中的索引。
                                                                                                * 该函数返回一个 ReactNode 类型的元素,用于表示该 ProHelp 数据源子项子项应该渲染的 UI 元素。
                                                                                                * 这个 Map 的作用是将 ProHelp 数据源子项子项的 valueType 属性与对应的渲染函数进行映射,从而实现在渲染 ProHelp 数据源时动态地选择渲染方法。
                                                                                                * 在实际使用时,我们可以通过判断子项的 valueType 属性,从 valueTypeMap 中取出对应的渲染函数,再将该子项和渲染函数作为参数传入 renderDataSourceItem 函数中即可。
                                                                                                */
                                                                                                valueTypeMap?: Map<
                                                                                                string,
                                                                                                (
                                                                                                item: ProHelpDataSourceChildren<ValueType>,
                                                                                                index: number
                                                                                                ) => React.ReactNode
                                                                                                >;
                                                                                                /**
                                                                                                * 帮助组件的子组件,用于渲染自定义的帮助内容。
                                                                                                */
                                                                                                children?: React.ReactNode;
                                                                                                /**
                                                                                                * 加载数据源的函数,如果把数据源设置为 async load就可以使用这个功能。
                                                                                                */
                                                                                                onLoadContext?: (
                                                                                                key: React.Key,
                                                                                                context: ProHelpDataSource<ValueType>['children'][number]
                                                                                                ) => Promise<ProHelpDataSourceChildren<ValueType>[]>;
                                                                                                };

                                                                                                  type ProLayoutProps

                                                                                                  type ProLayoutProps = GlobalTypes & {
                                                                                                  stylish?: {
                                                                                                  header?: GenerateStyle<SiderMenuToken>;
                                                                                                  sider?: GenerateStyle<SiderMenuToken>;
                                                                                                  };
                                                                                                  /** Layout 的品牌配置,表现为一张背景图片 */
                                                                                                  bgLayoutImgList?: {
                                                                                                  src?: string;
                                                                                                  width?: string;
                                                                                                  height?: string;
                                                                                                  left?: number;
                                                                                                  top?: number;
                                                                                                  bottom?: number;
                                                                                                  right?: number;
                                                                                                  }[];
                                                                                                  /**
                                                                                                  * @name 简约模式,设置了之后不渲染的任何 layout 的东西,但是会有 context,可以获取到当前菜单。
                                                                                                  *
                                                                                                  * @example pure={true}
                                                                                                  */
                                                                                                  pure?: boolean;
                                                                                                  /**
                                                                                                  * @name logo 的配置,可以配置url,React 组件 和 false
                                                                                                  *
                                                                                                  * @example 设置 logo 为网络地址 logo="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"
                                                                                                  * @example 设置 logo 为组件 logo={<img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/>}
                                                                                                  * @example 设置 logo 为 false 不显示 logo logo={false}
                                                                                                  * @example 设置 logo 为 方法 logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/> }
                                                                                                  * */
                                                                                                  logo?:
                                                                                                  | React.ReactNode
                                                                                                  | JSX.Element
                                                                                                  | WithFalse<() => React.ReactNode | JSX.Element>;
                                                                                                  /**
                                                                                                  * @name 页面切换的时候触发
                                                                                                  *
                                                                                                  * @example 获取切换的页面地址 onPageChange={(location) => { console.log("切换到:"+location.pathname) }}
                                                                                                  *
                                                                                                  * */
                                                                                                  onPageChange?: (location?: RouterTypes['location']) => void;
                                                                                                  /**
                                                                                                  * @name layout 的 loading 效果,设置完成之后只展示一个 loading
                                                                                                  *
                                                                                                  * @example loading={true}
                                                                                                  */
                                                                                                  loading?: boolean;
                                                                                                  /**
                                                                                                  * @name layout
                                                                                                  *
                                                                                                  * @description "zh-CN" | "zh-TW" | "en-US" | "it-IT" | "ko-KR"
                                                                                                  * @example 中文 layout="zh-CN"
                                                                                                  * @example 英文 layout="en-US"
                                                                                                  */
                                                                                                  locale?: LocaleType;
                                                                                                  /**
                                                                                                  * @name 是否收起 layout 是严格受控的,可以 设置为 true,一直收起
                                                                                                  *
                                                                                                  * @example collapsed={true}
                                                                                                  */
                                                                                                  collapsed?: boolean;
                                                                                                  /**
                                                                                                  * @name 收起和展开的时候触发事件
                                                                                                  *
                                                                                                  * @example onCollapse=(collapsed)=>{ setCollapsed(collapsed) };
                                                                                                  */
                                                                                                  onCollapse?: (collapsed: boolean) => void;
                                                                                                  /**
                                                                                                  * @name 页脚的配置
                                                                                                  *
                                                                                                  * @example 不展示dom footerRender={false}
                                                                                                  * @example 使用 layout 的 DefaultFooter footerRender={() => (<DefaultFooter copyright="这是一条测试文案"/>}
                                                                                                  */
                                                                                                  footerRender?: WithFalse<
                                                                                                  (
                                                                                                  props: ProLayoutProps & {
                                                                                                  hasSiderMenu?: boolean;
                                                                                                  },
                                                                                                  defaultDom: React.ReactNode
                                                                                                  ) => React.ReactNode
                                                                                                  >;
                                                                                                  /**
                                                                                                  * @name 设置 PageHeader 的面包屑,只能处理数据
                                                                                                  *
                                                                                                  * @example 手动设置 breadcrumbRender={(routers = []) => [ { path: '/', breadcrumbName: '主页'} ]
                                                                                                  * @example 增加一项 breadcrumbRender={(routers = []) => { return [{ path: '/', breadcrumbName: '主页'} ,...routers ]}
                                                                                                  * @example 删除首页 breadcrumbRender={(routers = []) => { return routers.filter(item => item.path !== '/')}
                                                                                                  * @example 不显示面包屑 breadcrumbRender={false}
                                                                                                  */
                                                                                                  breadcrumbRender?: WithFalse<
                                                                                                  (routers: BreadcrumbProps['items']) => BreadcrumbProps['items']
                                                                                                  >;
                                                                                                  /**
                                                                                                  * @name 设置页面的标题
                                                                                                  * @example 根据页面的路由设置标题 pageTitleRender={(props) => { return props.location.pathname }}
                                                                                                  * @example 不显示标题 pageTitleRender={false}
                                                                                                  * @example 根据默认的标题设置 pageTitleRender={(props,defaultPageTitle) => { return defaultPageTitle + '这是一个测试标题' }}
                                                                                                  * @example 根据 info 来自己组合标题 pageTitleRender={(props,defaultPageTitle,info) => { return info.title + "-" + info.pageName }
                                                                                                  */
                                                                                                  pageTitleRender?: WithFalse<
                                                                                                  (
                                                                                                  props: GetPageTitleProps,
                                                                                                  defaultPageTitle?: string,
                                                                                                  info?: {
                                                                                                  title: string;
                                                                                                  id: string;
                                                                                                  pageName: string;
                                                                                                  }
                                                                                                  ) => string
                                                                                                  >;
                                                                                                  /**
                                                                                                  * @name 处理 menuData 的数据,可以动态的控制数据
                                                                                                  * @see 尽量不要用异步数据来处理,否则可能造成更新不及时,如果异步数据推荐使用 menu.request 和 params。
                                                                                                  *
                                                                                                  * @example 删除一些菜单 menuDataRender=((menuData) => { return menuData.filter(item => item.name !== 'test') })
                                                                                                  * @example 增加一些菜单 menuDataRender={(menuData) => { return menuData.concat({ path: '/test', name: '测试', icon: 'smile' }) }}
                                                                                                  * @example 修改菜单 menuDataRender={(menuData) => { return menuData.map(item => { if (item.name === 'test') { item.name = '测试' } return item }) }}
                                                                                                  * @example 打平数据 menuDataRender={(menuData) => { return menuData.reduce((pre, item) => { return pre.concat(item.children || []) }, []) }}
                                                                                                  */
                                                                                                  menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[];
                                                                                                  /**
                                                                                                  * @name 处理每个面包屑的配置,需要直接返回 dom
                                                                                                  * @description (route: Route, params: any, routes: Array<Route>, paths: Array<string>) => React.ReactNode
                                                                                                  *
                                                                                                  * @example 设置 disabled: itemRender={(route, params, routes, paths) => { return <Button disabled>{route.breadcrumbName}</Button> }}
                                                                                                  * @example 拼接 path: itemRender={(route, params, routes, paths) => { return <a href={paths.join('/')}>{route.breadcrumbName}</a> }}
                                                                                                  */
                                                                                                  itemRender?: BreadcrumbProps['itemRender'];
                                                                                                  formatMessage?: (message: MessageDescriptor) => string;
                                                                                                  /** @name 是否禁用移动端模式
                                                                                                  *
                                                                                                  * @see 有的管理系统不需要移动端模式,此属性设置为true即可
                                                                                                  * @example disableMobile={true}
                                                                                                  * */
                                                                                                  disableMobile?: boolean;
                                                                                                  /**
                                                                                                  * content 的样式
                                                                                                  *
                                                                                                  * @example 背景颜色为红色 contentStyle={{ backgroundColor: 'red '}}
                                                                                                  */
                                                                                                  contentStyle?: CSSProperties;
                                                                                                  className?: string;
                                                                                                  /** PageHeader 的 BreadcrumbProps 配置,会透传下去 */
                                                                                                  breadcrumbProps?: Omit<BreadcrumbProps, 'itemRender'> & LayoutBreadcrumbProps;
                                                                                                  /** @name 水印的相关配置 */
                                                                                                  waterMarkProps?: WaterMarkProps;
                                                                                                  /**
                                                                                                  * @name 操作菜单重新刷新
                                                                                                  *
                                                                                                  * @example 重新获取菜单 actionRef.current.reload();
                                                                                                  * */
                                                                                                  actionRef?: React.MutableRefObject<
                                                                                                  | {
                                                                                                  reload: () => void;
                                                                                                  }
                                                                                                  | undefined
                                                                                                  >;
                                                                                                  /**
                                                                                                  * @name 错误处理组件
                                                                                                  *
                                                                                                  * @example ErrorBoundary={MyErrorBoundary}
                                                                                                  */
                                                                                                  ErrorBoundary?: React.ComponentClass<any, any> | boolean;
                                                                                                  /**
                                                                                                  * @name 侧边菜单的类型, menu.type 的快捷方式
                                                                                                  * @type "sub" | "group"
                                                                                                  * @example group
                                                                                                  */
                                                                                                  siderMenuType?: 'sub' | 'group';
                                                                                                  isChildrenLayout?: boolean;
                                                                                                  };

                                                                                                    type ProSettings

                                                                                                    type ProSettings = PureSettings & RenderSetting;

                                                                                                      type RouteContextType

                                                                                                      type RouteContextType = {
                                                                                                      breadcrumb?: BreadcrumbListReturn;
                                                                                                      menuData?: MenuDataItem[];
                                                                                                      isMobile?: boolean;
                                                                                                      prefixCls?: string;
                                                                                                      collapsed?: boolean;
                                                                                                      hasSiderMenu?: boolean;
                                                                                                      hasHeader?: boolean;
                                                                                                      siderWidth?: number;
                                                                                                      isChildrenLayout?: boolean;
                                                                                                      hasFooterToolbar?: boolean;
                                                                                                      hasFooter?: boolean;
                                                                                                      hasPageContainer?: number;
                                                                                                      setHasFooterToolbar?: React.Dispatch<React.SetStateAction<boolean>>;
                                                                                                      setHasPageContainer?: React.Dispatch<React.SetStateAction<number>>;
                                                                                                      pageTitleInfo?: {
                                                                                                      title: string;
                                                                                                      id: string;
                                                                                                      pageName: string;
                                                                                                      };
                                                                                                      matchMenus?: MenuDataItem[];
                                                                                                      matchMenuKeys?: string[];
                                                                                                      currentMenu?: PureSettings & MenuDataItem;
                                                                                                      /** PageHeader 的 BreadcrumbProps 配置,会透传下去 */
                                                                                                      breadcrumbProps?: BreadcrumbProps;
                                                                                                      waterMarkProps?: WaterMarkProps;
                                                                                                      } & Partial<PureSettings>;

                                                                                                        type SettingDrawerProps

                                                                                                        type SettingDrawerProps = {
                                                                                                        defaultSettings?: MergerSettingsType<ProSettings>;
                                                                                                        settings?: MergerSettingsType<ProSettings>;
                                                                                                        collapse?: boolean;
                                                                                                        onCollapseChange?: (collapse: boolean) => void;
                                                                                                        getContainer?: any;
                                                                                                        hideHintAlert?: boolean;
                                                                                                        hideCopyButton?: boolean;
                                                                                                        /** 使用实验性质的黑色主题 */
                                                                                                        enableDarkTheme?: boolean;
                                                                                                        prefixCls?: string;
                                                                                                        colorList?:
                                                                                                        | false
                                                                                                        | {
                                                                                                        key: string;
                                                                                                        color: string;
                                                                                                        title?: string;
                                                                                                        }[];
                                                                                                        onSettingChange?: (settings: MergerSettingsType<ProSettings>) => void;
                                                                                                        pathname?: string;
                                                                                                        disableUrlParams?: boolean;
                                                                                                        themeOnly?: boolean;
                                                                                                        };

                                                                                                          type SettingDrawerState

                                                                                                          type SettingDrawerState = {
                                                                                                          collapse?: boolean;
                                                                                                          language?: string;
                                                                                                          } & MergerSettingsType<ProSettings>;

                                                                                                            type Settings

                                                                                                            type ProSettings = PureSettings & RenderSetting;

                                                                                                              type TopNavHeaderProps

                                                                                                              type TopNavHeaderProps = SiderMenuProps & GlobalHeaderProps & PrivateSiderMenuProps;

                                                                                                                type WaterMarkProps

                                                                                                                type WaterMarkProps = {
                                                                                                                /** 类名 */
                                                                                                                className?: string;
                                                                                                                /** 样式 */
                                                                                                                style?: React.CSSProperties;
                                                                                                                /** 水印样式 */
                                                                                                                markStyle?: React.CSSProperties;
                                                                                                                /** 水印类名 */
                                                                                                                markClassName?: string;
                                                                                                                /** 水印之间的水平间距 */
                                                                                                                gapX?: number;
                                                                                                                /** 水印之间的垂直间距 */
                                                                                                                gapY?: number;
                                                                                                                /** 追加的水印元素的z-index */
                                                                                                                zIndex?: number;
                                                                                                                /** 水印的宽度 */
                                                                                                                width?: number;
                                                                                                                /** 水印的高度 */
                                                                                                                height?: number;
                                                                                                                /** 水印在canvas 画布上绘制的垂直偏移量,正常情况下,水印绘制在中间位置, 即 offsetTop = gapY / 2 */
                                                                                                                offsetTop?: number;
                                                                                                                /** 水印在canvas 画布上绘制的水平偏移量, 正常情况下,水印绘制在中间位置, 即 offsetTop = gapX / 2 */
                                                                                                                offsetLeft?: number;
                                                                                                                /** 水印绘制时,旋转的角度,单位 ° */
                                                                                                                rotate?: number;
                                                                                                                /** ClassName 前缀 */
                                                                                                                prefixCls?: string;
                                                                                                                /** 高清印图片源, 为了高清屏幕显示,建议使用 2倍或3倍图,优先使用图片渲染水印。 */
                                                                                                                image?: string;
                                                                                                                /** 水印文字内容 */
                                                                                                                content?: string | string[];
                                                                                                                /** 文字颜色 */
                                                                                                                fontColor?: string;
                                                                                                                /** 文字样式 */
                                                                                                                fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
                                                                                                                /** 文字族 */
                                                                                                                fontFamily?: string;
                                                                                                                /** 文字粗细 */
                                                                                                                fontWeight?: 'normal' | 'light' | 'weight' | number;
                                                                                                                /** 文字大小 */
                                                                                                                fontSize?: number | string;
                                                                                                                children?: React.ReactNode;
                                                                                                                };

                                                                                                                  Package Files (27)

                                                                                                                  Dependencies (14)

                                                                                                                  Dev Dependencies (1)

                                                                                                                  Peer Dependencies (3)

                                                                                                                  Badge

                                                                                                                  To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                  You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@ant-design/pro-layout.

                                                                                                                  • Markdown
                                                                                                                    [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@ant-design/pro-layout)
                                                                                                                  • HTML
                                                                                                                    <a href="https://www.jsdocs.io/package/@ant-design/pro-layout"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>