diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index c552f0cb530d..c0e16dc69aa5 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -43,4 +43,4 @@ Some component use dynamic style to support wave effect. You can config `csp` pr | getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` | 3.11.0 | | locale | language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | 3.21.0 | | prefixCls | set prefix class | string | ant | 3.12.0 | -| pageHeaderType | Unify the type of pageHeader | string | ant | 3.12.0 | +| pageHeader | Unify the type of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { type: 'ghost'\|'default' } | 'default' | 3.24.0 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index dcabe08bf7f2..df8268649bbf 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -73,6 +73,7 @@ class ConfigProvider extends React.Component { } // set pageHeader type + // 防止设置为 null 报错 if (pageHeader && pageHeader.type) { config.pageHeader = pageHeader; } diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index ded66f8027aa..cb3fa6e87451 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -44,4 +44,4 @@ return ( | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body | 3.11.0 | | locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | 3.21.0 | | prefixCls | 设置统一样式前缀 | string | ant | 3.12.0 | -| pageHeaderType | 统一设置 pageHeader 的 type | string | ant | 3.12.0 | +| pageHeader | 统一设置 pageHeader 的 type，参考 [pageHeader](<(/components/page-header)>) | { type: 'ghost' \| 'default' } | 'default' | 3.24.0 | diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap index a8912f82a307..6017d56afa3e 100644 --- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap +++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap @@ -697,10 +697,10 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = ` exports[`renders ./components/page-header/demo/pure.md correctly 1`] = `
window.history.back()} title="Title" subTitle="This is a subtitle" @@ -55,6 +55,6 @@ ReactDOM.render( diff --git a/components/page-header/index.en-US.md b/components/page-header/index.en-US.md index a31cf59385bc..8c1ad2123c04 100644 --- a/components/page-header/index.en-US.md +++ b/components/page-header/index.en-US.md @@ -18,7 +18,7 @@ It can also be used as inter-page navigation when it is needed to make the user | --- | --- | --- | --- | --- | | title | custom title text | ReactNode | - | 3.14.0 | | subTitle | custom subTitle text | ReactNode | - | 3.14.0 | -| type | pageHeader type, will change background color | `'default' | 'pure'` | 'default' | 3.24.0 | +| type | pageHeader type, will change background color | `'default' | 'ghost'` | 'default' | 3.24.0 | | avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | 3.22.0 | | backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `` | 3.14.0 | | tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index 33c76c35e989..69bedd7f82a8 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -22,7 +22,7 @@ export interface PageHeaderProps { avatar?: AvatarProps; onBack?: (e: React.MouseEvent) => void; className?: string; - type?: 'pure' | 'default'; + type?: 'ghost' | 'default'; } const renderBack = ( @@ -90,7 +90,7 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => { const PageHeader: React.SFC = props => ( - {({ getPrefixCls, pageHeaderType }: ConfigConsumerProps) => { + {({ getPrefixCls, pageHeader = { type: 'default' } }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, style, @@ -106,7 +106,8 @@ const PageHeader: React.SFC = props => ( const className = classnames(prefixCls, customizeClassName, { 'has-breadcrumb': breadcrumbDom, 'has-footer': footer, - pure: type || pageHeaderType, + // 防止设置为 null 报错 + ghost: type === 'ghost' || (pageHeader && pageHeader.type === 'ghost'), }); return ( diff --git a/components/page-header/index.zh-CN.md b/components/page-header/index.zh-CN.md index 700f931439d9..5d670617b3a9 100644 --- a/components/page-header/index.zh-CN.md +++ b/components/page-header/index.zh-CN.md @@ -18,7 +18,7 @@ subtitle: 页头 | --- | --- | --- | --- | --- | | title | 自定义标题文字 | ReactNode | - | 3.14.0 | | subTitle | 自定义的二级标题文字 | ReactNode | - | 3.14.0 | -| type | pageHeader 的类型，将会改变背景颜色 | `'default' | 'pure'` | 'default' | 3.24.0 | +| type | pageHeader 的类型，将会改变背景颜色 | `'default' | 'ghost'` | 'default' | 3.24.0 | | avatar | 标题栏旁的头像 | [avatar props](/components/avatar/) | - | 3.22.0 | | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode | `` | 3.14.0 | | tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 6d9e17ce52dc..4bf3c451119a 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -9,7 +9,7 @@ padding: @page-header-padding-vertical @page-header-padding; background-color: @component-background; - &.pure { + &.ghost { background-color: inherit; }