diff --git a/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap index 9dda8bf28..c5f4f211d 100644 --- a/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap @@ -982,3 +982,217 @@ exports[`PageContainer > extra and footer 1`] = ` `; + +exports[`PageContainer > title 1`] = ` +
+
+
+
+ + 页面标题 + +
+
+
+
+
+
+
+
+
+
+
+ 基本信息 +
+
+
+ + + + + + + + + + + + + +
+
+ + 创建人 + + + + 曲丽丽 + + +
+ 		+
+ + 电话号码 + + + + 1810000000 + + +
+ 		+
+ + 地址 + + + + 浙江省杭州市西湖区工专路 + + +
+
+
+ + 关联表单 + + + + + 421421 + + + +
+ 		+
+ + 创建时间 + + + + 2017-01-10 + + +
+ 		+
+ + 备注 + + + + 这是备注 + + +
+
+
+
+
+
+
+
+
+
+`; diff --git a/packages/ui/src/PageContainer/__tests__/index.test.tsx b/packages/ui/src/PageContainer/__tests__/index.test.tsx index 6d762dcb2..074b26fe7 100644 --- a/packages/ui/src/PageContainer/__tests__/index.test.tsx +++ b/packages/ui/src/PageContainer/__tests__/index.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import BasicDemo from '../demo/basic'; import ExtraAndFooterDemo from '../demo/extra-footer'; +import TitleCompatibleDemo from '../demo/title'; describe('PageContainer', () => { it('basic', () => { @@ -13,4 +14,9 @@ describe('PageContainer', () => { const { asFragment } = render(); expect(asFragment().firstChild).toMatchSnapshot(); }); + + it('title', () => { + const { asFragment } = render(); + expect(asFragment().firstChild).toMatchSnapshot(); + }); }); diff --git a/packages/ui/src/PageContainer/demo/title.tsx b/packages/ui/src/PageContainer/demo/title.tsx new file mode 100644 index 000000000..20a220c06 --- /dev/null +++ b/packages/ui/src/PageContainer/demo/title.tsx @@ -0,0 +1,29 @@ +/** + * iframe: 600 + */ +import React from 'react'; +import { Button, Card, Descriptions } from '@oceanbase/design'; +import { PageContainer } from '@oceanbase/ui'; + +export default () => { + return ( + 重置, ]} + > + + + 曲丽丽 + 1810000000 + 浙江省杭州市西湖区工专路 + + 421421 + + 2017-01-10 + 这是备注 + + + + ); +}; diff --git a/packages/ui/src/PageContainer/index.md b/packages/ui/src/PageContainer/index.md index 83b93d24c..c8f1a45f9 100644 --- a/packages/ui/src/PageContainer/index.md +++ b/packages/ui/src/PageContainer/index.md @@ -19,12 +19,14 @@ nav: - - + + + + ## 与路由搭配使用 由于 PageContainer 内置的面包屑导航跳转依赖路由能力，需要通过 ConfigProvider 全局注入 `navigate` 函数才会生效。 diff --git a/packages/ui/src/PageContainer/index.tsx b/packages/ui/src/PageContainer/index.tsx index 90418376d..ada1f2fa6 100644 --- a/packages/ui/src/PageContainer/index.tsx +++ b/packages/ui/src/PageContainer/index.tsx @@ -33,6 +33,8 @@ export interface PageContainerProps extends AntPageContainerProps { const PageContainer = ({ prefixCls: customizePrefixCls, className, + /* compatible with title prop */ + title, header, content, extraContent, @@ -83,6 +85,7 @@ const PageContainer = ({ }, }; const noHasHeader = + !title && ['title', 'subTitle', 'extra', 'tags', 'avatar', 'backIcon', 'breadcrumb'].every( item => !newHeader?.[item] ) && @@ -102,6 +105,7 @@ const PageContainer = ({