@ant-design/pro-layout

@ant-design/pro-layout

Version 6.38.19
Published 2 days ago
1.39 MB
19 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

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>;

variable PageHeaderWrapper

const PageHeaderWrapper: any;

variable PageLoading

const PageLoading: React.FC<any>;

variable ProBreadcrumb

const ProBreadcrumb: React.FC<BreadcrumbProps>;

配置与面包屑相同，只是增加了自动根据路由计算面包屑的功能。此功能必须要在 ProLayout 中使用。
Parameter props
Returns

variable ProLayout

const ProLayout: React.FC<BasicLayoutProps>;

🌃 Powerful and easy to use beautiful layout 🏄‍ Support multiple topics and layout types
Parameter props

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 },
    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;

Classes

class DefaultHeader

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

property renderContent

renderContent: () =>
    | string
    | number
    | boolean
    | JSX.Element
    | React.ReactFragment
    | 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

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 ProLayoutProps

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 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 (19)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (1)

react

Badge

To add a badge like this oneto 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>

Updated just now.
Package analyzed in 5728 ms.
Missing or incorrect documentation? Open an issue for this package.

@ant-design/pro-layout

Install

Overview

Index

Variables

Functions

Classes

Type Aliases

Variables

variable BasicLayout

Parameter props

variable DefaultFooter

variable FooterToolbar

variable GridContent

Parameter props

variable PageContainer

variable PageHeaderWrapper

variable PageLoading

variable ProBreadcrumb

Parameter props

Returns

variable ProLayout

Parameter props

variable ProPageHeader

variable RouteContext

variable SettingDrawer

Parameter props

variable TopNavHeader

variable WaterMark

Functions

function getMenuData

function getPageTitle

Classes

class DefaultHeader

property renderContent

method render

Type Aliases

type BasicLayoutProps

type FooterProps

type HeaderProps

type MenuDataItem

type PageContainerProps

type ProLayoutProps

type ProSettings

type RouteContextType

type SettingDrawerProps

type SettingDrawerState

type Settings

type TopNavHeaderProps

Package Files (16)

Dependencies (19)

Dev Dependencies (0)

Peer Dependencies (1)

Badge