From a48811bcd545a281a7d4343be1675281d16cfb32 Mon Sep 17 00:00:00 2001 From: chenshuai Date: Sat, 5 Oct 2019 12:42:02 +0800 Subject: [PATCH] add type props --- components/config-provider/index.tsx | 9 ++++ components/page-header/demo/actions.md | 2 +- components/page-header/demo/breadcrumb.md | 2 +- components/page-header/demo/content.md | 2 +- components/page-header/demo/pure.md | 60 +++++++++++++++++++++++ components/page-header/demo/responsive.md | 2 +- components/page-header/index.en-US.md | 1 + components/page-header/index.tsx | 5 +- components/page-header/index.zh-CN.md | 1 + components/page-header/style/index.less | 6 ++- 10 files changed, 84 insertions(+), 6 deletions(-) create mode 100644 components/page-header/demo/pure.md diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 721f68a49c6d..2e54ddbe55d1 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -22,6 +22,7 @@ export interface ConfigConsumerProps { csp?: CSPConfig; autoInsertSpaceInButton?: boolean; locale?: Locale; + pageHeaderType?: 'pure' | 'default'; } export const configConsumerProps = [ @@ -32,6 +33,7 @@ export const configConsumerProps = [ 'csp', 'autoInsertSpaceInButton', 'locale', + 'pageHeaderType', ]; export interface ConfigProviderProps { @@ -42,6 +44,7 @@ export interface ConfigProviderProps { csp?: CSPConfig; autoInsertSpaceInButton?: boolean; locale?: Locale; + pageHeaderType?: 'pure' | 'default'; } const ConfigContext = createReactContext({ @@ -74,6 +77,7 @@ class ConfigProvider extends React.Component { csp, autoInsertSpaceInButton, locale, + pageHeaderType, } = this.props; const config: ConfigConsumerProps = { @@ -90,6 +94,11 @@ class ConfigProvider extends React.Component { config.renderEmpty = renderEmpty; } + // set pageHeader type + if (pageHeaderType) { + config.pageHeaderType = pageHeaderType; + } + return ( diff --git a/components/page-header/demo/actions.md b/components/page-header/demo/actions.md index cc0e23a2487d..3bc0ef5bb53c 100644 --- a/components/page-header/demo/actions.md +++ b/components/page-header/demo/actions.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 5 title: zh-CN: 多种形态的 PageHeader en-US: Various forms of PageHeader diff --git a/components/page-header/demo/breadcrumb.md b/components/page-header/demo/breadcrumb.md index ffa32e2a8e3d..1899a781e769 100644 --- a/components/page-header/demo/breadcrumb.md +++ b/components/page-header/demo/breadcrumb.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 3 title: zh-CN: 带面包屑页头 en-US: Use with breadcrumbs diff --git a/components/page-header/demo/content.md b/components/page-header/demo/content.md index 56fce528ba24..b9fda472d7c2 100644 --- a/components/page-header/demo/content.md +++ b/components/page-header/demo/content.md @@ -1,5 +1,5 @@ --- -order: 3 +order: 4 title: zh-CN: 组合示例 en-US: Complete example diff --git a/components/page-header/demo/pure.md b/components/page-header/demo/pure.md new file mode 100644 index 000000000000..6d16565e3780 --- /dev/null +++ b/components/page-header/demo/pure.md @@ -0,0 +1,60 @@ +--- +order: 2 +title: + zh-CN: 纯净模式，没有白底 + en-US: Pure mode, no white background +--- + +## zh-CN + +在某些情况下，pageHeader 不需要自己的背景颜色。 + +## en-US + +In some cases, pageHeader does not require its own background color. + +```jsx +import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd'; + +ReactDOM.render( +
+ window.history.back()} + title="Title" + subTitle="This is a subtitle" + extra={[ + , + , + , + ]} + > + + Lili Qu + + 421421 + + 2017-01-10 + 2017-10-10 + + Gonghu Road, Xihu District, Hangzhou, Zhejiang, China + + + +
, + mountNode, +); +``` + + diff --git a/components/page-header/demo/responsive.md b/components/page-header/demo/responsive.md index a82f3e04c6f0..efe5b0c42744 100644 --- a/components/page-header/demo/responsive.md +++ b/components/page-header/demo/responsive.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 6 iframe: 210 title: zh-CN: 响应式 diff --git a/components/page-header/index.en-US.md b/components/page-header/index.en-US.md index 2ece3d07275b..a31cf59385bc 100644 --- a/components/page-header/index.en-US.md +++ b/components/page-header/index.en-US.md @@ -18,6 +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 | | 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 5019c0e9614f..33c76c35e989 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -22,6 +22,7 @@ export interface PageHeaderProps { avatar?: AvatarProps; onBack?: (e: React.MouseEvent) => void; className?: string; + type?: 'pure' | 'default'; } const renderBack = ( @@ -89,12 +90,13 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => { const PageHeader: React.SFC = props => ( - {({ getPrefixCls }: ConfigConsumerProps) => { + {({ getPrefixCls, pageHeaderType }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, style, footer, children, + type, breadcrumb, className: customizeClassName, } = props; @@ -104,6 +106,7 @@ const PageHeader: React.SFC = props => ( const className = classnames(prefixCls, customizeClassName, { 'has-breadcrumb': breadcrumbDom, 'has-footer': footer, + pure: type || pageHeaderType, }); return ( diff --git a/components/page-header/index.zh-CN.md b/components/page-header/index.zh-CN.md index 78b0a6aa3f48..700f931439d9 100644 --- a/components/page-header/index.zh-CN.md +++ b/components/page-header/index.zh-CN.md @@ -18,6 +18,7 @@ subtitle: 页头 | --- | --- | --- | --- | --- | | title | 自定义标题文字 | ReactNode | - | 3.14.0 | | subTitle | 自定义的二级标题文字 | ReactNode | - | 3.14.0 | +| type | pageHeader 的类型，将会改变背景颜色 | `'default' | 'pure'` | '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 3d011db9218c..696189ea7545 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -5,10 +5,14 @@ .@{pageheader-prefix-cls} { .reset-component; - + background-color: @component-background; position: relative; padding: @page-header-padding-vertical @page-header-padding; + &.pure { + background-color: inherit; + } + &.has-breadcrumb { padding-top: @page-header-padding-breadcrumb; }