@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
Functions
Interfaces
Type Aliases
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>;
variable PageHeader
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
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)
- es/ProLayout.d.ts
- es/components/Footer.d.ts
- es/components/FooterToolbar/index.d.ts
- es/components/GridContent/index.d.ts
- es/components/Header/index.d.ts
- es/components/PageContainer/index.d.ts
- es/components/PageHeader/index.d.ts
- es/components/PageLoading/index.d.ts
- es/components/SettingDrawer/index.d.ts
- es/components/TopNavHeader/index.d.ts
- es/components/WaterMark/index.d.ts
- es/context/RouteContext.d.ts
- es/defaultSettings.d.ts
- es/getPageTitle.d.ts
- es/index.d.ts
- es/typing.d.ts
- es/utils/getMenuData.d.ts
Dependencies (17)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (3)
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[](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 .
Package analyzed in 4358 ms. - Missing or incorrect documentation? Open an issue for this package.