@ant-design/pro-layout

  • Version 6.38.2
  • Published
  • 1.36 MB
  • 18 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 BasicLayout

const BasicLayout: React.FC<BasicLayoutProps>;
  • 🌃 Powerful and easy to use beautiful layout 🏄‍ Support multiple topics and layout types

    Parameter props

variable DefaultFooter

const DefaultFooter: React.FC<FooterProps>;

    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 PageHeaderWrapper: any;

          variable PageLoading

          const PageLoading: React.FC<any>;

            variable ProBreadcrumb

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

              Parameter props

              Returns

            variable ProPageHeader

            const ProPageHeader: React.FC<
            {
            title?: any;
            content?: React.ReactNode;
            extraContent?: React.ReactNode;
            prefixCls?: string;
            footer?: ReactNode[];
            ghost?: boolean;
            header?: any;
            pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>;
            affixProps?: Omit<AffixProps, 'children'>;
            loading?: any;
            breadcrumbRender?: any;
            waterMarkProps?: WaterMarkProps;
            breadcrumb?: BreadcrumbProps;
            children?: React.ReactNode;
            } & PageHeaderTabConfig &
            Omit<
            PageHeaderProps,
            'title' | 'footer' | 'breadcrumbRender' | 'breadcrumb'
            > & { prefixedClassName: string }
            >;

              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 | undefined } | undefined,
                    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 | undefined
                      ) => string;

                        Classes

                        class DefaultHeader

                        class HeaderView extends Component<
                        HeaderViewProps & PrivateSiderMenuProps,
                        HeaderViewState
                        > {}

                          property renderContent

                          renderContent: () =>
                          | string
                          | number
                          | boolean
                          | React.ReactFragment
                          | JSX.Element
                          | null
                          | undefined;

                            method render

                            render: () => React.ReactNode;

                              Type Aliases

                              type BasicLayoutProps

                              type BasicLayoutProps = GlobalTypes & {
                              /**
                              * @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<Route>['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;
                              /**
                              * @name 取消 content的 margin
                              *
                              * @example 取消内容的 margin disableContentMargin={true}
                              * */
                              disableContentMargin?: boolean;
                              /** 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;
                              isChildrenLayout?: boolean;
                              };

                                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[];
                                    /** @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;
                                    [key: string]: any;
                                    };

                                      type PageContainerProps

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

                                        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;
                                          setHasFooterToolbar?: React.Dispatch<React.SetStateAction<boolean>>;
                                          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;
                                            }[];
                                            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;

                                                    Package Files (16)

                                                    Dependencies (18)

                                                    Dev Dependencies (0)

                                                    No dev dependencies.

                                                    Peer Dependencies (2)

                                                    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>