PageHeader: add page-header component (#15714)

components.json

@@ -75,5 +75,6 @@
   "image": "./packages/image/index.js",
   "calendar": "./packages/calendar/index.js",
   "backtop": "./packages/backtop/index.js",
-  "infiniteScroll": "./packages/infiniteScroll/index.js"
+  "infiniteScroll": "./packages/infiniteScroll/index.js",
+  "page-header": "./packages/page-header/index.js"
 }

examples/docs/en-US/page-header.md

+## PageHeader
+
+If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
+
+### Basic
+
+:::demo
+```html
+<el-page-header @back="goBack" content="detail">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```html
+:::
+
+### Attributes
+| Attribute | Description   | Type      | Accepted Values               | Default |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | main title    | string    |  —                            | Back   |
+| content   | content       | string    |  —                            | —      |
+
+### Events
+| Event Name | Description   | Parameters |
+|----------- |-------------- |----------- |
+| back       | triggers when right side is clicked | — |
+
+### Slots
+| slot      | Description            |
+|---------- | ---------------------- |
+| title     | title content          |
+| content   | content                |

examples/docs/es/page-header.md

+## PageHeader
+
+If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
+
+### Basic
+
+:::demo
+```html
+<el-page-header @back="goBack" content="detail">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```html
+:::
+
+### Attributes
+| Attribute | Description   | Type      | Accepted Values               | Default |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | main title    | string    |  —                            | Back   |
+| content   | content       | string    |  —                            | —      |
+
+### Events
+| Event Name | Description   | Parameters |
+|----------- |-------------- |----------- |
+| back       | triggers when right side is clicked | — |
+
+### Slots
+| slot      | Description            |
+|---------- | ---------------------- |
+| title     | title content          |
+| content   | content                |

examples/docs/fr-FR/page-header.md

+## PageHeader
+
+If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
+
+### Basic
+
+:::demo
+```html
+<el-page-header @back="goBack" content="detail">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```html
+:::
+
+### Attributes
+| Attribute | Description   | Type      | Accepted Values               | Default |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | main title    | string    |  —                            | Back   |
+| content   | content       | string    |  —                            | —      |
+
+### Events
+| Event Name | Description   | Parameters |
+|----------- |-------------- |----------- |
+| back       | triggers when right side is clicked | — |
+
+### Slots
+| slot      | Description            |
+|---------- | ---------------------- |
+| title     | title content          |
+| content   | content                |

examples/docs/zh-CN/page-header.md

+## PageHeader 页头
+
+如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
+
+### 基础
+
+:::demo
+```html
+<el-page-header @back="goBack" content="详情页面">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | 标题           | string    |  —                            | 返回   |
+| content   | 内容           | string    |  —                            | —      |
+
+
+### Events
+| 事件名称   | 说明           | 回调参数   |
+|---------- |-------------- |---------- |
+| back      | 点击左侧区域触发 | —        |
+
+### Slots
+| 事件名称    | 说明         |
+|---------- |------------- |
+| title     | 标题内容      |
+| content   | 内容         |

examples/nav.config.json

@@ -215,6 +215,10 @@
               "path": "/breadcrumb",
               "title": "Breadcrumb 面包屑"
             },
+            {
+              "path": "/page-header",
+              "title": "PageHeader 页头"
+            },
             {
               "path": "/dropdown",
               "title": "Dropdown 下拉菜单"
@@ -497,6 +501,10 @@
               "path": "/breadcrumb",
               "title": "Breadcrumb"
             },
+            {
+              "path": "/page-header",
+              "title": "PageHeader"
+            },
             {
               "path": "/dropdown",
               "title": "Dropdown"
@@ -779,6 +787,10 @@
               "path": "/breadcrumb",
               "title": "Breadcrumb"
             },
+            {
+              "path": "/page-header",
+              "title": "PageHeader"
+            },
             {
               "path": "/dropdown",
               "title": "Dropdown"
@@ -1061,6 +1073,10 @@
               "path": "/breadcrumb",
               "title": "Breadcrumb"
             },
+            {
+              "path": "/page-header",
+              "title": "PageHeader"
+            },
             {
               "path": "/dropdown",
               "title": "Dropdown"

packages/page-header/index.js

+import PageHeader from './src/main';
+
+/* istanbul ignore next */
+PageHeader.install = function(Vue) {
+  Vue.component(PageHeader.name, PageHeader);
+};
+
+export default PageHeader;

packages/page-header/src/main.vue

+<template>
+  <div class="el-page-header">
+    <div class="el-page-header__left" @click="$emit('back')">
+      <i class="el-icon-back"></i>
+      <div class="el-page-header__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+    </div>
+    <div class="el-page-header__content">
+      <slot name="content">{{ content }}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { t } from 'element-ui/src/locale';
+export default {
+  name: 'ElPageHeader',
+
+  props: {
+    title: {
+      type: String,
+      default() {
+        return t('el.pageHeader.title');
+      }
+    },
+    content: String
+  }
+};
+</script>

packages/theme-chalk/src/index.scss

@@ -72,3 +72,4 @@
 @import "./image.scss";
 @import "./calendar.scss";
 @import "./backtop.scss";
+@import "./page-header.scss";

packages/theme-chalk/src/page-header.scss

+@import "mixins/mixins";
+@import "common/var";
+
+@include b(page-header) {
+  display: flex;
+  line-height: 24px;
+
+  @include e(left) {
+    display: flex;
+    cursor: pointer;
+    margin-right: 40px;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: 1px;
+      height: 16px;
+      right: -20px;
+      top: 50%;
+      transform: translateY(-50%);
+      background-color: $--border-color-base;
+    }
+
+    .el-icon-back {
+      font-size: 18px;
+      margin-right: 6px;
+      align-self: center;
+    }
+
+    @include e(title) {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+
+  @include e(content) {
+    font-size: 18px;
+    color: $--color-text-primary;
+  }
+}

src/index.js

@@ -77,6 +77,7 @@ import Image from '../packages/image/index.js';
 import Calendar from '../packages/calendar/index.js';
 import Backtop from '../packages/backtop/index.js';
 import InfiniteScroll from '../packages/infiniteScroll/index.js';
+import PageHeader from '../packages/page-header/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -153,6 +154,7 @@ const components = [
   Image,
   Calendar,
   Backtop,
+  PageHeader,
   CollapseTransition
 ];
 
@@ -269,5 +271,6 @@ export default {
   Image,
   Calendar,
   Backtop,
-  InfiniteScroll
+  InfiniteScroll,
+  PageHeader
 };

src/locale/lang/af-ZA.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/ar.js

@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/bg.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/ca.js

@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/cs-CZ.js

@@ -109,6 +109,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/da.js

@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/de.js

@@ -108,6 +108,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/ee.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/el.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/en.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED'
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/es.js

@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/eu.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/fa.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/fi.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/fr.js

@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/he.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/hr.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/hu.js

@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/hy-AM.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/id.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/it.js

@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/ja.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/kg.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/km.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/ko.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/ku.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/kz.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/lt.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/lv.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/mn.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/nb-NO.js

@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/nl.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/pl.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/pt-br.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/pt.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/ro.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/ru-RU.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/sk.js

@@ -109,6 +109,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/sl.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/sr.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/sv-SE.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/ta.js

@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/th.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/tk.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/tr-TR.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/ua.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/ug-CN.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/vi.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };

src/locale/lang/zh-CN.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: '加载失败'
+    },
+    pageHeader: {
+      title: '返回'
     }
   }
 };

src/locale/lang/zh-TW.js

@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: '加載失敗'
+    },
+    pageHeader: {
+      title: '返回'
     }
   }
 };

test/unit/specs/page-header.spec.js

+import { createVue, destroyVM, waitImmediate } from '../util';
+import PageHeader from 'packages/page-header';
+
+describe('PageHeader', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('render well and trigger back event', async() => {
+    vm = createVue(PageHeader, {
+      content: 'content'
+    });
+    expect(vm.$el).to.exist;
+    const spy = sinon.spy();
+    vm.$on('back', spy);
+    vm.$el.querySelector('.el-page-header__left').click();
+
+    await waitImmediate();
+
+    expect(spy.calledOnce).to.be.true;
+  });
+});
+

types/element-ui.d.ts

@@ -76,6 +76,7 @@ import { ElCalendar } from './calendar'
 import { ElImage } from './image'
 import { ElBacktop } from './backtop'
 import { ElInfiniteScroll } from './infiniteScroll'
+import { ElPageHeader } from './page-header'
 
 export interface InstallationOptions {
   locale: any,
@@ -329,3 +330,5 @@ export class Backtop extends ElBacktop {}
 /** InfiniteScroll Component */
 export class InfiniteScroll extends ElInfiniteScroll {}
 
+/** PageHeader Component */
+export class PageHeader extends ElPageHeader {}

types/page-header.d.ts

+import { ElementUIComponent } from './component'
+
+/** PageHeader Component */
+export declare class ElPageHeader extends ElementUIComponent {
+  /** title */
+  title: String
+
+  /** content */
+  content: String
+}