PageHeader: add page-header component (ElemeFE#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

@@ -0,0 +1,39 @@
+## 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

@@ -0,0 +1,39 @@
+## 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

@@ -0,0 +1,39 @@
+## 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

@@ -0,0 +1,40 @@
+## 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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,30 @@
+<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

@@ -0,0 +1,41 @@
+@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
     }
   }
 };