feat: Pageheader new style and props (#19100)

* pure page header style * add type props * add prue demo * add config provider doc * fix lint * fix lint error * change pure to ghost * fix test * default ghost is true * fix review style * fix review warning * use online style * remove defualt and remove comment * add test
2025-07-31 12:18:42 +08:00 · 2019-10-15 11:46:12 +08:00 · 2019-10-15 11:46:12 +08:00 · 338018eba3
commit 338018eba3
parent e75fa039ef
19 changed files with 393 additions and 36 deletions
--- a/components/config-provider/tests/snapshots/components.test.js.snap
+++ b/components/config-provider/tests/snapshots/components.test.js.snap
@ -8430,6 +8430,60 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
 </div>
 `;

+exports[`ConfigProvider components PageHeader configProvider 1`] = `
+<div>
+  <div
+    class="config-page-header"
+  >
+    <div
+      class="config-page-header-heading"
+    >
+      <span
+        class="config-page-header-heading-title"
+      >
+        pageHeader
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ConfigProvider components PageHeader normal 1`] = `
+<div>
+  <div
+    class="ant-page-header ant-page-header-ghost"
+  >
+    <div
+      class="ant-page-header-heading"
+    >
+      <span
+        class="ant-page-header-heading-title"
+      >
+        pageHeader
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ConfigProvider components PageHeader prefixCls 1`] = `
+<div>
+  <div
+    class="prefix-PageHeader prefix-PageHeader-ghost"
+  >
+    <div
+      class="prefix-PageHeader-heading"
+    >
+      <span
+        class="prefix-PageHeader-heading-title"
+      >
+        pageHeader
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ConfigProvider components Pagination configProvider 1`] = `
 <div>
  <ul
--- a/components/config-provider/tests/components.test.js
+++ b/components/config-provider/tests/components.test.js
@ -31,6 +31,7 @@ import Mention from '../../mention';
 import Menu from '../../menu';
 import Modal from '../../modal';
 import Pagination from '../../pagination';
+import PageHeader from '../../page-header';
 import Popconfirm from '../../popconfirm';
 import Popover from '../../popover';
 import Progress from '../../progress';
@ -74,7 +75,11 @@ describe('ConfigProvider', () => {
        // configProvider
        it('configProvider', () => {
          expect(
-            render(<ConfigProvider prefixCls="config">{renderComponent({})}</ConfigProvider>),
+            render(
+              <ConfigProvider pageHeader={{ ghost: false }} prefixCls="config">
+                {renderComponent({})}
+              </ConfigProvider>,
+            ),
          ).toMatchSnapshot();
        });
      });
@ -368,6 +373,13 @@ describe('ConfigProvider', () => {
      </div>
    ));

+    // PageHeader
+    testPair('PageHeader', props => (
+      <div>
+        <PageHeader title="pageHeader" {...props} />
+      </div>
+    ));
+
    // Popconfirm
    testPair('Popconfirm', props => (
      <div>
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@ -14,6 +14,9 @@ export interface ConfigConsumerProps {
  csp?: CSPConfig;
  autoInsertSpaceInButton?: boolean;
  locale?: Locale;
+  pageHeader?: {
+    ghost: boolean;
+  };
 }

 export const ConfigContext = createReactContext<ConfigConsumerProps>({
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@ -43,3 +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 |
+| pageHeader | Unify the ghost of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { ghost:boolean } | 'true' | 3.24.0 |
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@ -18,6 +18,7 @@ export const configConsumerProps = [
  'csp',
  'autoInsertSpaceInButton',
  'locale',
+  'pageHeader',
 ];

 export interface ConfigProviderProps {
@ -28,6 +29,9 @@ export interface ConfigProviderProps {
  csp?: CSPConfig;
  autoInsertSpaceInButton?: boolean;
  locale?: Locale;
+  pageHeader?: {
+    ghost: boolean;
+  };
 }

 class ConfigProvider extends React.Component<ConfigProviderProps> {
@ -47,6 +51,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
      csp,
      autoInsertSpaceInButton,
      locale,
+      pageHeader,
    } = this.props;

    const config: ConfigConsumerProps = {
@ -59,10 +64,15 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
    if (getPopupContainer) {
      config.getPopupContainer = getPopupContainer;
    }
+
    if (renderEmpty) {
      config.renderEmpty = renderEmpty;
    }

+    if (pageHeader) {
+      config.pageHeader = pageHeader;
+    }
+
    return (
      <ConfigContext.Provider value={config}>
        <LocaleProvider locale={locale || legacyLocale} _ANT_MARK__={ANT_MARK}>
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@ -44,3 +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 |
+| pageHeader | 统一设置 pageHeader 的 type，参考 [pageHeader](<(/components/page-header)>) | { ghost: boolean } | 'true' | 3.24.0 |
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@ -257,6 +257,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
            'getPrefixCls',
            'renderEmpty',
            'csp',
+            'pageHeader',
            'autoInsertSpaceInButton',
          ])}
          {...offsetStyle}
--- a/components/page-header/tests/snapshots/demo.test.js.snap
+++ b/components/page-header/tests/snapshots/demo.test.js.snap
@ -3,7 +3,8 @@
 exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
 <div>
  <div
-    class="ant-page-header"
+    class="ant-page-header ant-page-header-ghost"
+    style="border:1px solid rgb(235, 237, 240)"
  >
    <div
      class="ant-page-header-heading"
@ -182,7 +183,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
  </div>
  <br />
  <div
-    class="ant-page-header"
+    class="ant-page-header ant-page-header-ghost"
  >
    <div
      class="ant-page-header-heading"
@ -363,7 +364,8 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `

 exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `
 <div
-  class="ant-page-header"
+  class="ant-page-header ant-page-header-ghost"
+  style="border:1px solid rgb(235, 237, 240)"
 >
  <div
    class="ant-page-header-heading"
@ -415,7 +417,8 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `

 exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
 <div
-  class="ant-page-header has-breadcrumb"
+  class="ant-page-header has-breadcrumb ant-page-header-ghost"
+  style="border:1px solid rgb(235, 237, 240)"
 >
  <div
    class="ant-breadcrumb"
@ -486,7 +489,8 @@ exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `

 exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
 <div
-  class="ant-page-header has-breadcrumb"
+  class="ant-page-header has-breadcrumb ant-page-header-ghost"
+  style="border:1px solid rgb(235, 237, 240)"
 >
  <div
    class="ant-breadcrumb"
@ -695,10 +699,196 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
 </div>
 `;

+exports[`renders ./components/page-header/demo/ghost.md correctly 1`] = `
+<div
+  style="background-color:#F5F5F5;padding:24px"
+>
+  <div
+    class="ant-page-header"
+  >
+    <div
+      class="ant-page-header-heading"
+    >
+      <div
+        class="ant-page-header-back"
+      >
+        <div
+          aria-label="Back"
+          class="ant-page-header-back-button"
+          role="button"
+          style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
+          tabindex="0"
+        >
+          <i
+            aria-label="icon: arrow-left"
+            class="anticon anticon-arrow-left"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="arrow-left"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+              />
+            </svg>
+          </i>
+        </div>
+      </div>
+      <span
+        class="ant-page-header-heading-title"
+      >
+        Title
+      </span>
+      <span
+        class="ant-page-header-heading-sub-title"
+      >
+        This is a subtitle
+      </span>
+      <span
+        class="ant-page-header-heading-extra"
+      >
+        <button
+          class="ant-btn"
+          type="button"
+        >
+          <span>
+            Operation
+          </span>
+        </button>
+        <button
+          class="ant-btn"
+          type="button"
+        >
+          <span>
+            Operation
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            Primary
+          </span>
+        </button>
+      </span>
+    </div>
+    <div
+      class="ant-page-header-content"
+    >
+      <div
+        class="ant-descriptions ant-descriptions-small"
+      >
+        <div
+          class="ant-descriptions-view"
+        >
+          <table>
+            <tbody>
+              <tr
+                class="ant-descriptions-row"
+              >
+                <td
+                  class="ant-descriptions-item"
+                  colspan="1"
+                >
+                  <span
+                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                  >
+                    Created
+                  </span>
+                  <span
+                    class="ant-descriptions-item-content"
+                  >
+                    Lili Qu
+                  </span>
+                </td>
+                <td
+                  class="ant-descriptions-item"
+                  colspan="1"
+                >
+                  <span
+                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                  >
+                    Association
+                  </span>
+                  <span
+                    class="ant-descriptions-item-content"
+                  >
+                    <a>
+                      421421
+                    </a>
+                  </span>
+                </td>
+                <td
+                  class="ant-descriptions-item"
+                  colspan="1"
+                >
+                  <span
+                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                  >
+                    Creation Time
+                  </span>
+                  <span
+                    class="ant-descriptions-item-content"
+                  >
+                    2017-01-10
+                  </span>
+                </td>
+              </tr>
+              <tr
+                class="ant-descriptions-row"
+              >
+                <td
+                  class="ant-descriptions-item"
+                  colspan="1"
+                >
+                  <span
+                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                  >
+                    Effective Time
+                  </span>
+                  <span
+                    class="ant-descriptions-item-content"
+                  >
+                    2017-10-10
+                  </span>
+                </td>
+                <td
+                  class="ant-descriptions-item"
+                  colspan="2"
+                >
+                  <span
+                    class="ant-descriptions-item-label ant-descriptions-item-colon"
+                  >
+                    Remarks
+                  </span>
+                  <span
+                    class="ant-descriptions-item-content"
+                  >
+                    Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
 <div>
  <div
-    class="ant-page-header has-footer"
+    class="ant-page-header has-footer ant-page-header-ghost"
+    style="border:1px solid rgb(235, 237, 240)"
  >
    <div
      class="ant-page-header-heading"
--- a/components/page-header/tests/snapshots/index.test.js.snap
+++ b/components/page-header/tests/snapshots/index.test.js.snap
@ -2,13 +2,13 @@

 exports[`PageHeader pageHeader should not render blank dom 1`] = `
 <div
-  class="ant-page-header"
+  class="ant-page-header ant-page-header-ghost"
 />
 `;

 exports[`PageHeader pageHeader should support className 1`] = `
 <div
-  class="ant-page-header not-works"
+  class="ant-page-header not-works ant-page-header-ghost"
 >
  <div
    class="ant-page-header-heading"
--- 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
@ -19,6 +19,9 @@ import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd';
 ReactDOM.render(
  <div>
    <PageHeader
+      style={{
+        border: '1px solid rgb(235, 237, 240)',
+      }}
      onBack={() => window.history.back()}
      title="Title"
      subTitle="This is a subtitle"
--- a/components/page-header/demo/basic.md
+++ b/components/page-header/demo/basic.md
@ -17,13 +17,14 @@ Standard header, suitable for use in scenarios that require a brief description.
 import { PageHeader } from 'antd';

 ReactDOM.render(
-  <PageHeader onBack={() => null} title="Title" subTitle="This is a subtitle" />,
+  <PageHeader
+    style={{
+      border: '1px solid rgb(235, 237, 240)',
+    }}
+    onBack={() => null}
+    title="Title"
+    subTitle="This is a subtitle"
+  />,
  mountNode,
 );
 ```
-
-<style>
-.code-box-demo .ant-page-header {
-  border: 1px solid rgb(235, 237, 240);
-}
-<style>
--- 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
@ -32,7 +32,14 @@ const routes = [
 ];

 ReactDOM.render(
-  <PageHeader title="Title" breadcrumb={{ routes }} subTitle="This is a subtitle" />,
+  <PageHeader
+    style={{
+      border: '1px solid rgb(235, 237, 240)',
+    }}
+    title="Title"
+    breadcrumb={{ routes }}
+    subTitle="This is a subtitle"
+  />,
  mountNode,
 );
 ```
--- 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
@ -142,6 +142,9 @@ const Content = ({ children, extraContent }) => {
 ReactDOM.render(
  <PageHeader
    title="Title"
+    style={{
+      border: '1px solid rgb(235, 237, 240)',
+    }}
    subTitle="This is a subtitle"
    tags={<Tag color="blue">Running</Tag>}
    extra={[
@ -169,9 +172,3 @@ ReactDOM.render(
  mountNode,
 );
 ```
-
-<style>
-.ant-page-header {
-  border: 1px solid rgb(235, 237, 240);
-}
-<style>
--- a/components/page-header/demo/ghost.md
+++ b/components/page-header/demo/ghost.md
@ -0,0 +1,54 @@
+---
+order: 2
+title:
+  zh-CN: 白底模式
+  en-US: white background mode
+---
+
+## zh-CN
+
+默认 PageHeader 是透明底色的。在某些情况下，PageHeader 需要自己的背景颜色。
+
+## en-US
+
+The default PageHeader is a transparent background. In some cases, PageHeader needs its own background color.
+
+```jsx
+import { PageHeader, Button, Descriptions } from 'antd';
+
+ReactDOM.render(
+  <div
+    style={{
+      backgroundColor: '#F5F5F5',
+      padding: 24,
+    }}
+  >
+    <PageHeader
+      ghost={false}
+      onBack={() => window.history.back()}
+      title="Title"
+      subTitle="This is a subtitle"
+      extra={[
+        <Button key="3">Operation</Button>,
+        <Button key="2">Operation</Button>,
+        <Button key="1" type="primary">
+          Primary
+        </Button>,
+      ]}
+    >
+      <Descriptions size="small" column={3}>
+        <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
+        <Descriptions.Item label="Association">
+          <a>421421</a>
+        </Descriptions.Item>
+        <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
+        <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
+        <Descriptions.Item label="Remarks">
+          Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
+        </Descriptions.Item>
+      </Descriptions>
+    </PageHeader>
+  </div>,
+  mountNode,
+);
+```
--- a/components/page-header/demo/responsive.md
+++ b/components/page-header/demo/responsive.md
@ -1,6 +1,6 @@
 ---
-order: 4
-iframe: 240
+order: 6
+iframe: 210
 title:
  zh-CN: 响应式
  en-US: responsive
@ -64,6 +64,9 @@ const Content = ({ children, extra }) => {
 ReactDOM.render(
  <div>
    <PageHeader
+      style={{
+        border: '1px solid rgb(235, 237, 240)',
+      }}
      onBack={() => window.history.back()}
      title="Title"
      subTitle="This is a subtitle"
@ -92,6 +95,10 @@ ReactDOM.render(
 tr:last-child td {
  padding-bottom: 0;
 }
+.ant-statistic-content {
+  font-size: 20px;
+  line-height: 28px;
+}
 #components-page-header-demo-responsive .content {
  display: flex;
 }
--- 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 | boolean | true | 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 | `<Icon type="arrow-left" />` | 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 |
--- 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<HTMLDivElement>) => void;
  className?: string;
+  ghost?: boolean;
 }

 const renderBack = (
@ -89,7 +90,7 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => {

 const PageHeader: React.SFC<PageHeaderProps> = props => (
  <ConfigConsumer>
-    {({ getPrefixCls }: ConfigConsumerProps) => {
+    {({ getPrefixCls, pageHeader }: ConfigConsumerProps) => {
      const {
        prefixCls: customizePrefixCls,
        style,
@ -98,12 +99,21 @@ const PageHeader: React.SFC<PageHeaderProps> = props => (
        breadcrumb,
        className: customizeClassName,
      } = props;
+      let ghost: undefined | boolean = true;
+
+      // Use `ghost` from `props` or from `ConfigProvider` instead.
+      if ('ghost' in props) {
+        ghost = props.ghost;
+      } else if (pageHeader && 'ghost' in pageHeader) {
+        ghost = pageHeader.ghost;
+      }

      const prefixCls = getPrefixCls('page-header', customizePrefixCls);
      const breadcrumbDom = breadcrumb && breadcrumb.routes ? renderBreadcrumb(breadcrumb) : null;
      const className = classnames(prefixCls, customizeClassName, {
        'has-breadcrumb': breadcrumbDom,
        'has-footer': footer,
+        [`${prefixCls}-ghost`]: ghost,
      });

      return (
--- 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 |
+| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true | 3.24.0 |
 | avatar | 标题栏旁的头像 | [avatar props](/components/avatar/) | - | 3.22.0 |
 | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode | `<Icon type="arrow-left" />` | 3.14.0 |
 | tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 |
--- a/components/page-header/style/index.less
+++ b/components/page-header/style/index.less
@ -5,23 +5,27 @@

 .@{pageheader-prefix-cls} {
  .reset-component;
-
  position: relative;
-  padding: @page-header-padding;
+  padding: @page-header-padding-vertical @page-header-padding;
+  background-color: @component-background;
+
+  &-ghost {
+    background-color: inherit;
+  }

  &.has-breadcrumb {
    padding-top: @page-header-padding-breadcrumb;
  }

  &.has-footer {
-    padding-bottom: @page-header-padding-vertical;
+    padding-bottom: 0;
  }

  &-back {
    float: left;
-    margin: 6px 0;
+    margin: 8px 0;
    margin-right: 16px;
-    font-size: 20px;
+    font-size: 16px;
    line-height: 1;
    &-button {
      .operation-unit();
@ -50,7 +54,7 @@
      padding-right: 12px;
      color: @heading-color;
      font-weight: 600;
-      font-size: @heading-3-size;
+      font-size: @heading-4-size;
      line-height: 32px;
    }

@ -85,7 +89,7 @@
  }

  &-content {
-    padding-top: 16px;
+    padding-top: 12px;
    overflow: hidden;
  }