@ant-design/pro-layout

  • Version 7.6.1
  • Published
  • 733 kB
  • 17 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?: AppsLogoComponentsAppList;
    itemClick?: (item: AppsLogoComponentsAppItem) => 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) => React.ReactNode[]>;
    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 ProLayout

              const ProLayout: React.FC<ProLayoutProps>;

                variable RouteContext

                const RouteContext: React.Context<RouteContextType>;

                  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 ProPageHeader

                          ProPageHeader: (
                          props: PageContainerProps & { prefixedClassName: string }
                          ) => JSX.Element | null;

                            Interfaces

                            interface PageHeaderProps

                            interface PageHeaderProps {}

                              property avatar

                              avatar?: AvatarProps;

                                property backIcon

                                backIcon?: React.ReactNode;

                                  property breadcrumb

                                  breadcrumb?: 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 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 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 路径,可以设定为网页链接 */
                                                                    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 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: HeaderViewProps, 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: AntdBreadcrumbProps['routes']) => AntdBreadcrumbProps['routes']
                                                                        >;
                                                                        /**
                                                                        * @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}</Button> }}
                                                                        */
                                                                        itemRender?: AntdBreadcrumbProps['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?: AntdBreadcrumbProps & LayoutBreadcrumbProps;
                                                                        /** @name 水印的相关配置 */
                                                                        waterMarkProps?: WaterMarkProps;
                                                                        /**
                                                                        * @name 操作菜单重新刷新
                                                                        *
                                                                        * @example 重新获取菜单 actionRef.current.reload();
                                                                        * */
                                                                        actionRef?: React.MutableRefObject<
                                                                        | {
                                                                        reload: () => void;
                                                                        }
                                                                        | undefined
                                                                        >;
                                                                        /**
                                                                        * @name 错误处理组件
                                                                        *
                                                                        * @example ErrorBoundary={<MyErrorBoundary/>}
                                                                        */
                                                                        ErrorBoundary?: any;
                                                                        /**
                                                                        * @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 (17)

                                                                                        Dependencies (17)

                                                                                        Dev Dependencies (0)

                                                                                        No dev dependencies.

                                                                                        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>