Pro Components
Enable JavaScript to run this app.
⌘ KEnglish目录何时使用代码演示基础使用通过 token 修改样式黑色主题侧栏导航 中后台产品默认推荐混合导航顶部导航侧栏导航宽度256px页脚工具栏和全局公告 收起时展示 title不分组菜单样式经典导航样式通过调整页面背景内容调整整体氛围定制菜单样式通过设置页背景和卡片样式简化界面层次自定侧栏菜单下方区域菜单展开-站点地图从服务器加载 menu从服务器加载 menu 并且使用 icon自定义 menu 的内容自定义页脚搜索菜单多个路由对应一个菜单项默认打开所有菜单总是打开所有菜单使用 IconFont吸顶 headerghost 模式嵌套布局自定义的 collapse面包屑显示在顶部多级站点导航沉浸式导航跨站点导航 - simple 分组跨站点导航列表 分组模式layout 自带了错误处理功能，防止白屏沉浸式导航APIProLayoutmenuSettingDrawerPageLoadingRouteContextGridContentgetMenuDatagetPageTitleSettingsMenuDataItemRouteFooterGridContentRouteContextTokenLayout 的 tokenSider TokenHeader TokenpageContainer TokenFAQ自定义布局和 umi 一起使用收起展开自定义菜单的宽度自动切割菜单自定义菜单从服务器获取ProLayout - 高级布局ProLayout 可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态，自动生成菜单等功能。与 PageContainer 配合使用可以自动生成面包屑，页面标题，并且提供低成本方案接入页脚工具栏。何时使用页面中需要承载内容时，可以使用 ProLayout 来减少布局成本。代码演示基础使用通过 token 修改样式黑色主题侧栏导航 中后台产品默认推荐混合导航顶部导航侧栏导航宽度256px页脚工具栏和全局公告 收起时展示 title不分组菜单样式经典导航样式通过调整页面背景内容调整整体氛围定制菜单样式通过设置页背景和卡片样式简化界面层次自定侧栏菜单下方区域菜单展开-站点地图从服务器加载 menuProLayout 提供了强大的菜单功能，但是这样必然会封装很多行为，导致需要一些特殊逻辑的用户感到不满。所以我们提供了很多的 API，期望可以满足绝大部分客户的方式。从服务器加载 menu 主要使用的 API 是 menuDataRender 和 menuRender,menuDataRender可以控制当前的菜单数据，menuRender可以控制菜单的 dom 节点。从服务器加载 menu 并且使用 icon这里主要是一个演示，我们需要准备一个枚举来进行 icon 的渲染，可以显著的减少打包的大小自定义 menu 的内容通过 menuItemRender, subMenuItemRender,title,logo,menuHeaderRender 可以非常方便的自定义 menu 的样式。如果实在是不满意，可以使用 menuRender 完全的自定义。自定义页脚ProLayout 默认不提供页脚，要是和 Pro 官网相同的样式，需要自己引入一下页脚。这里用于展示 ProLayout 的各种应用，如果你觉得你的用法能帮助到别人，欢迎 PR。搜索菜单多个路由对应一个菜单项默认打开所有菜单menu 配置 defaultOpenAll 可以默认打开所有菜单总是打开所有菜单折叠按钮反复切换后 defaultOpenAll 将失效，menu 配置 ignoreFlatMenu 可以忽略手动折叠过的菜单，实现总是默认打开所有菜单。因为计算时机在组件渲染前，所以异步菜单不生效。使用 IconFont吸顶 headerPageContainer 配置 fixedHeader 可以将吸顶 header。ghost 模式嵌套布局自定义的 collapse面包屑显示在顶部多级站点导航沉浸式导航跨站点导航 - simple 分组使用默认卡片展示，请确保每一项都有 desc，且值为真；使用分组展示，请确保每一项都有 children，且长度大于 0；跨站点导航列表 分组模式layout 自带了错误处理功能，防止白屏APIProLayout所有以 Render 后缀的方法都可以通过传入 false 来使其不渲染。参数说明类型默认值titlelayout 的左上角 的 titleReactNode'Ant Design Pro'logolayout 的左上角 logo 的 urlReactNode | ()=> ReactNode-pure是否删除掉所有的自带界面boolean-loadinglayout 的加载态boolean-location当前应用会话的位置信息。如果你的应用创建了自定义的 history，则需要显示指定 location 属性，详见 issuehistory.locationisBrowser ? window.location : undefinedappList跨站点导航列表{ icon, title, desc, url, target, children }[]-menuHeaderRender渲染 logo 和 titleReactNode | (logo,title)=>ReactNode-menuFooterRender在 layout 底部渲染一个块(menuProps)=>ReactNode-onMenuHeaderClickmenu 菜单的头部点击事件(e: React.MouseEvent<HTMLDivElement>) => void-menuExtraRender在菜单标题的下面渲染一个区域(menuProps)=>ReactNode-onTopMixMenuHeaderClickmix 模式下顶部栏的头部点击事件(e: React.MouseEvent<HTMLDivElement>) => void-contentStylelayout 的内容区 styleCSSProperties-layoutlayout 的菜单模式,side：右侧导航，top：顶部导航side | top|mixsidecontentWidthlayout 的内容模式,Fluid：自适应，Fixed：定宽 1200pxFluid | FixedFluidactionReflayout 的常见的操作，比如刷新菜单MutableRefObject<ActionType>-fixedHeader是否固定 header 到顶部booleanfalsefixSiderbar是否固定导航booleanfalsebreakpoint触发响应式布局的断点Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }lgmenu关于 menu 的配置，暂时只有 locale,locale 可以关闭 menu 的自带的全球化menuConfig{ locale: true }iconfontUrl使用 IconFont 的图标配置URL-locale当前 layout 的语言设置zh-CN | zh-TW | en-USnavigator.languagesettingslayout 的设置Settings-siderWidth侧边菜单宽度number208defaultCollapsed默认的菜单的收起和展开，会受到 breakpoint 的影响，breakpoint=false 生效boolean-collapsed控制菜单的收起和展开boolean-onCollapse菜单的折叠收起事件(collapsed: boolean) => void-onPageChange页面切换时触发(location: Location) => void-headerRender自定义头的 render 方法(props: ProLayoutProps) => ReactNode-headerTitleRender自定义头标题的方法,mix 模式 和 top 模式下生效(logo,title,props)=>ReactNode-headerContentRender自定义头内容的方法(props: ProLayoutProps) => ReactNode-avatarPropslayout 的头像设置，不同的 layout 放在不同的位置AvatarProps-actionsRender自定义操作列表(layoutProps)=>ReactNode[]-collapsedButtonRender自定义 collapsed button 的方法(collapsed: boolean) => ReactNode-footerRender自定义页脚的 render 方法(props: ProLayoutProps) => JSX.Element | false-pageTitleRender自定义页面标题的显示方法(props: ProLayoutProps) => string-menuRender自定义菜单的 render 方法(props: HeaderViewProps) => ReactNode-postMenuData在显示前对菜单数据进行查看，修改不会触发重新渲染(menuData: MenuDataItem[]) => MenuDataItem[]-menuItemRender自定义菜单项的 render 方法(itemProps: MenuDataItem, defaultDom: React.ReactNode, props: BaseMenuProps) => ReactNode-subMenuItemRender自定义拥有子菜单菜单项的 render 方法(itemProps: MenuDataItem) => ReactNode-menuDataRendermenuData 的 render 方法，用来自定义 menuData(menuData: MenuDataItem[]) => MenuDataItem[]-breadcrumbRender自定义面包屑的数据(route)=>route-breadcrumbProps传递到 antd Breadcrumb 组件的 props, 参考 (https://ant.design/components/breadcrumb-cn/)breadcrumbPropsundefinedroute用于生成菜单和面包屑。umi 的 Layout 会自动带有route-disableMobile禁止自动切换到移动页面booleanfalseErrorBoundary自带了错误处理功能，防止白屏，ErrorBoundary=false 关闭默认错误边界ReactNode内置 ErrorBoundarylinks显示在菜单右下角的快捷操作ReactNode[]-menuProps传递到 antd menu 组件的 props, 参考 (https://ant.design/components/menu-cn/)MenuPropsundefinedwaterMarkProps配置水印，水印是 PageContainer 的功能，layout 只是透传给 PageContainerWaterMarkProps-menumenu 中支持了部分常用的 menu 配置， 可以帮助我们更好的管理 menu参数说明类型默认值localemenu 是否使用国际化，还需要 formatMessage 的配合。booleantruedefaultOpenAll默认打开所有的菜单项，要注意只有 layout 挂载之前生效，异步加载菜单是不支持的booleanfalseignoreFlatMenu是否忽略手动折叠过的菜单状态，结合 defaultOpenAll 可实现折叠按钮切换后，同样可以展开所有子菜单booleanfalsetype菜单的类型sub | groupgroupautoClose选中菜单是否自动关闭菜单booleantrueloading菜单是否正在加载中booleanfalseonLoadingChange菜单的加载状态变更(loading)=>void-request远程加载菜单的方法，会自动的修改 loading 状态(params,defaultMenuDat) => Promise<MenuDataItem[]>-SettingDrawer参数说明类型默认值collapse控制 SettingDrawer 的收起和展开boolean-onCollapseChangeSettingDrawer 的折叠收起事件(collapsed: boolean) => void-settingslayout 的设置Settings | Settings-onSettingChangeSettings 发生更改事件(settings: [Settings](#Settings) ) => void-hideHintAlert删除下方的提示信息boolean-hideCopyButton不展示 copy 功能boolean-disableUrlParams禁止同步设置到查询参数booleanfalseenableDarkTheme打开黑色主题切换功能 ｜ booleanfalsecolorList自带的颜色切换系统(ColorList 的 title 会作为 Tooltip 显示) ｜ {key,color,title?}[]ColorList自带的颜色列表PageLoading一个简单的加载页面参数说明类型默认值(...)支持所有的 antd Spin 组件参数--RouteContextRouteContext 可以提供 Layout 的内置的数据。例如 isMobile 和 collapsed，你可以消费这些数据来自定义一些行为。GridContentGridContent 封装了 等宽和 流式 的逻辑。你可以在 preview 中查看预览效果。参数说明类型默认值contentWidth内容模式Fluid | Fixed-getMenuData根据 router 信息来生成 menuData 和 breadcrumb。参数说明类型默认值routes路由的配置信息route[]-menumenu 的配置项，默认 {locale: true}{ locale: boolean }-menuDataRendermenuData 的 render 方法，用来自定义 menuData(menuData: MenuDataItem[]) => MenuDataItem[]-formatMessagereact-intl 的 formatMessage 方法(data: { id: any; defaultMessage?: string }) => string;-getPageTitlegetPageTitle 封装了根据 menuData 上生成的 title 的逻辑。参数说明类型默认值pathname当前的 pathnamelocation.pathname-breadcrumbMenuDataItem 的合集{ [path: string]: MenuDataItem }-menumenu 的配置项，默认 {locale: true}{ locale: boolean }-titletitle 的类型string'Ant Design Pro'formatMessagereact-intl 的 formatMessage 方法(data: { id: any; defaultMessage?: string }) => string;-SettingsMenuDataItemRouteFooter页脚一般一般会展示一些公司和版权信息，默认的 ProLayout 不提供 Footer,但是提供了一个 DefaultFooter 组件，支持配置一些超链接和一些版权信息。GridContentGridContent 是个简单的语法糖，封装了 ProLayout 的 contentWidth 配置，contentWidth 如果设置为 Fixed 定宽模式，最宽只有 1200px。使用方式：RouteContextRouteContext 提供一个可以根据 layout 的数据来进行一些操作, PageContainer 和 FooterToolbar 都是依赖 RouteContext 的数据来实现功能。TokenToken 是一种设计系统的基本元素，可以使用 Token 快速的修改组件库的基础样式。Layout 中可以通过 token 属性来配置这些颜色。Layout 的 tokentoken说明默认值bgLayoutlayout 的背景颜色linear-gradient(${antdToken.colorBgContainer}, ${antdToken.colorBgLayout} 28%)colorTextAppListIcon跨站点应用的图标颜色#666colorTextAppListIconHover跨站点应用的图标 hover 颜色rgba(0, 0, 0, 0.65)colorBgAppListIconHover跨站点应用的图标 hover 背景颜色rgba(0, 0, 0, 0.04)Sider TokenSider Token 是 侧边菜单的色值，与顶部菜单不同。token说明默认值colorMenuBackgroundmenu 的背景颜色transparentcolorTextMenuTitlesider 的标题字体颜色colorTextHeadingcolorMenuItemDividermenuItem 分割线的颜色colorSplitcolorTextMenumenuItem 的字体颜色colorTextcolorTextMenuSecondarymenu 的二级字体颜色，比如 footer 和 action 的 iconcolorTextcolorTextMenuSelectedmenuItem 的选中字体颜色rgb(0,0,0)colorTextMenuActivemenuItem hover 的选中字体颜色rgba(0, 0, 0, 0.85)colorTextMenuItemHovermenuItem 的 hover 字体颜色rgba(255,255,255,0.75)colorBgMenuItemHovermenuItem 的 hover 背景颜色rgba(90, 75, 75, 0.03)colorBgMenuItemSelectedmenuItem 的选中背景颜色rgba(0, 0, 0, 0.04)colorBgMenuItemCollapsedHover收起 menuItem 的 hover 背景颜色rgba(0, 145, 255, 0.1)colorBgMenuItemCollapsedSelected收起 menuItem 的选中背景颜色rgba(0, 145, 255, 0.08)colorBgMenuItemCollapsedElevated收起 menuItem 的弹出菜单背景颜色transparentcolorBgCollapsedButton展开收起按钮背景颜色#fffcolorTextCollapsedButton展开收起按钮 hover 字体颜色colorTextMenuSecondarycolorTextCollapsedButtonHover展开收起按钮 hover 时字体颜色colorTextMenuHeader Tokentoken说明默认值colorBgHeaderheader 的背景颜色rgba(240, 242, 245, 0.4)colorHeaderTitlesider 的标题字体颜色colorTextHeadingcolorTextMenumenuItem 的字体颜色colorTextcolorTextMenuSecondarymenu 的二级字体颜色，比如 footer 和 action 的 iconcolorTextcolorTextMenuSelectedmenuItem 的选中字体颜色rgb(0,0,0)colorTextMenuActivemenuItem hover 的选中字体颜色rgba(0, 0, 0, 0.85)colorBgMenuItemHovermenuItem 的 hover 背景颜色rgba(90, 75, 75, 0.03)colorBgMenuItemSelectedmenuItem 的选中背景颜色rgba(0, 0, 0, 0.04)colorBgMenuItemCollapsedHover收起 menuItem 的 hover 背景颜色rgba(0, 145, 255, 0.1)colorBgMenuItemCollapsedSelected收起 menuItem 的选中背景颜色rgba(0, 145, 255, 0.08)colorTextRightActionsItem右上角字体颜色colorTextSecondarycolorBgRightActionsItemHover右上角选中的 hover 颜色rgba(0, 0, 0, 0.03)heightLayoutHeaderheader 高度56pageContainer Tokentoken说明默认值paddingBlockPageContainerContentpageContainer 自带的 padding block24paddingInlinePageContainerContentpageContainer 自带的 padding inline40colorBgPageContainerpageContainer 的背景颜色transparentcolorBgPageContainerFixedpageContainer 被固定时的背景颜色#FFFFAQ自定义布局ProLayout 提供一些 api 删除用户不需要的区域。在 SettingDrawer 也提供一些配置来进行设置。headerRender 可以自定义顶栏footerRender 可以自定义页脚menuRender 可以自定义菜单区域menuHeaderRender 自定义的菜单头区域menuExtraRender 可以为菜单增加一个额外内容，在菜单头和菜单之间在 layout 中所有的 xxxRender 都可以传入 false，来关闭渲染。和 umi 一起使用ProLayout 与 umi 配合使用会有最好的效果，umi 会把 config.ts 中的路由帮我们自动注入到配置的 layout 中，这样我们就可以免去手写菜单的烦恼。ProLayout 扩展了 umi 的 router 配置，新增了 name，icon，locale,hideInMenu,hideChildrenInMenu 等配置，这样可以更方便的生成菜单，在一个地方配置即可。数据格式如下：ProLayout 会根据 location.pathname 来自动选中菜单，并且自动生成相应的面包屑。如果不想使用可以自己配置 selectedKeys 和 openKeys 来进行受控配置。收起展开一些时候我们会发现 collapsed 和 onCollapse 设置默认收起并不生效，这是因为 ProLayout 中内置了 breakpoint 来触发收起的机制，我们可以设置 breakpoint={false} 来关掉这个机制。自定义菜单的宽度siderWidth 可以自定义菜单的宽度，你可以设置的更短或者更长 FooterToolbar 等组件会自动支持，但是可能需要做一些样式上的处理，不然菜单展示可能会有一些小问题。菜单收起宽度是无法自定义的，因为涉及到动画和巨量的 css 改动，自定义难度很大。自动切割菜单自动切割菜单是 mix 模式专属的能力，他可以把第一级的菜单放置到顶栏中。我们可以设置 splitMenus=true 来打开它，为了体验良好最好给每个一级菜单都设置一个重定向,这样可以防止切换到白屏页面。自定义菜单ProLayout 会自动生成菜单，同时根据 pathname 进行自动选中。配合 PageContainer 可以实现自动推算面包屑和页面标题。如果和 umi 配置使用，只需要将 Page 的 props 交给 ProLayout，ProLayout 会根据 config 中的 routers 的配置可以自动生成菜单。为了提供更多的功能，我们扩展了 routers 配置，增加了几个配置方便自定义，数据结构定义如下:name 用于配置在菜单中的名称，同时会修改为浏览器标签页标题icon 代表菜单的图标，只 antd 的图标，iconfont 需要自己定义locale 可以设置菜单名称的国际化表示hideInMenu 会把这个路由配置在 menu 中隐藏这个路由，name 不填会有相同的效果hideChildrenInMenu 会把这个路由的子节点在 menu 中隐藏ProLayout 其实是读取的 props 中的 route 和 location。这两个属性是 umi 默认注入的。从服务器获取有些时候我们希望服务器来管理我们的路由，所以希望菜单时服务器进行分发的数据。我们提供了 menuDataRender 来进行修改数据，但是要注意 menuDataRender 会触发重新渲染，并且还会支持的国际化和权限的配置，如果你不需要国际化，建议使用 postMenuData 可以显著的提升性能。服务器需要返回的数据与 MenuDataItem 相同，menuDataRender 需要返回一个数组，如果你想拥有更好的性能可以试试使用 props 中的 route 属性，这里有个 demo。