PageContainer - 页容器

PageContainer 是为了减少繁杂的面包屑配置和标题,很多页面都需要面包屑和标题的配置。当然也可以关掉自动生成的,而使用自己的配置。

PageContainer 封装了 antd 的 PageHeader 组件,增加了 tabList 和 content。 根据当前的路由填入 title 和 breadcrumb。它依赖 Layout 的 route 属性。当然你可以传入参数来复写默认值。 PageContainer 支持 Tabs 和 PageHeader 的所有属性。

为了方便进行表单等操作我们增加了一个 footer 属性,可以获得一个一直悬浮在底部的操作栏。如果觉得不方便也可以直接使用 FooterToolbar 来承载操作,两者表现基本相同,但是 FooterToolbar 拥有更多自定义的配置。

<PageContainer
content="欢迎使用 ProLayout 组件"
tabList={[
{
tab: '基本信息',
key: 'base',
},
{
tab: '详细信息',
key: 'info',
},
]}
extra={[
<Button key="3">操作</Button>,
<Button key="2">操作</Button>,
<Button key="1" type="primary">
主操作
</Button>,
]}
footer={[
<Button key="rest">重置</Button>,
<Button key="submit" type="primary">
提交
</Button>,
]}
>
{children}
</PageContainer>

代码演示

基本使用

固定表头

隐藏面包屑

页面加载中

API

PageContainer 封装了 ant design 的 PageHeader 组件,增加了 tabList 和 content。 根据当前的路由填入 title 和 breadcrumb。它依赖 Layout 的 route 属性。当然你可以传入参数来复写默认值。 PageContainer 支持 TabsPageHeader 的所有属性。

参数说明类型默认值
content内容区ReactNode-
extraContent额外内容区,位于 content 的右侧ReactNode-
tabListtab 标题列表{key: string, tab: ReactNode}[]-
tabActiveKey当前高亮的 tab 项string-
onTabChange切换面板的回调(key) => void-
tabBarExtraContenttab bar 上额外的元素React.ReactNode-
headerPageHeader 的所有属性PageHeaderProps-
ghost配置头部区域的背景颜色为透明booleanfalse
fixedHeader固定 pageHeader 的内容到顶部,如果页面内容较少,最好不要使用,会有严重的遮挡问题boolean-
affixProps固钉的配置,与 antd 完全相同AffixProps-
footer悬浮在底部的操作栏,传入一个数组,会自动加空格ReactNode[]-
waterMarkProps配置水印,Layout 会透传给 PageContainer,但是以 PageContainer 的配置优先WaterMarkProps-
tabPropsTabs 的相关属性,只有卡片样式的页签支持新增和关闭选项。使用 closable={false} 禁止关闭TabsProps-

fixedHeader 使用了 antd 的 Affix 实现,默认监听 body,如果你的滚动条不在 body 上需要人肉设置一下。

FooterToolbar

参数说明类型默认值
extra额外内容区,位于 content 的右侧ReactNode-
children内容区域ReactNode|ReactNode[]-

FooterToolbar api 比较简单,主要功能是实现了在 layout 中自动控制浮动,使其不会挡住菜单。如果你没有使用 ProLayout 需要通过 style 来自定义宽度和浮动。

<FooterToolbar
style={{
left: 208,
width: `calc(100% - 208px)`,
}}
>
<Button>提交</Button>
</FooterToolbar>

ProBreadcrumb

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

import { ProBreadcrumb, ProLayout } from '@ant-design/pro-components';
return (props) => (
<ProLayout
{...props}
// 将面包屑显示在顶部
headerContentRender={() => {
return <ProBreadcrumb />;
}}
/>
);