Skip to content

Commit 2e2fc04

Browse files
ziyoungFeng
ziyoung
authored and
Feng
committed
PageHeader: add page-header component (ElemeFE#15714)
1 parent fff9c5f commit 2e2fc04

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+446
-2
lines changed

‎components.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,5 +75,6 @@
7575
"image": "./packages/image/index.js",
7676
"calendar": "./packages/calendar/index.js",
7777
"backtop": "./packages/backtop/index.js",
78-
"infiniteScroll": "./packages/infiniteScroll/index.js"
78+
"infiniteScroll": "./packages/infiniteScroll/index.js",
79+
"page-header": "./packages/page-header/index.js"
7980
}

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
## PageHeader
2+
3+
If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
4+
5+
### Basic
6+
7+
:::demo
8+
```html
9+
<el-page-header @back="goBack" content="detail">
10+
</el-page-header>
11+
12+
<script>
13+
export default {
14+
methods: {
15+
goBack() {
16+
console.log('go back');
17+
}
18+
}
19+
}
20+
</script>
21+
```html
22+
:::
23+
24+
### Attributes
25+
| Attribute | Description | Type | Accepted Values | Default |
26+
|---------- |-------------- |---------- |------------------------------ | ------ |
27+
| title | main title | string | — | Back |
28+
| content | content | string | — | — |
29+
30+
### Events
31+
| Event Name | Description | Parameters |
32+
|----------- |-------------- |----------- |
33+
| back | triggers when right side is clicked | — |
34+
35+
### Slots
36+
| slot | Description |
37+
|---------- | ---------------------- |
38+
| title | title content |
39+
| content | content |

‎examples/docs/es/page-header.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
## PageHeader
2+
3+
If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
4+
5+
### Basic
6+
7+
:::demo
8+
```html
9+
<el-page-header @back="goBack" content="detail">
10+
</el-page-header>
11+
12+
<script>
13+
export default {
14+
methods: {
15+
goBack() {
16+
console.log('go back');
17+
}
18+
}
19+
}
20+
</script>
21+
```html
22+
:::
23+
24+
### Attributes
25+
| Attribute | Description | Type | Accepted Values | Default |
26+
|---------- |-------------- |---------- |------------------------------ | ------ |
27+
| title | main title | string | — | Back |
28+
| content | content | string | — | — |
29+
30+
### Events
31+
| Event Name | Description | Parameters |
32+
|----------- |-------------- |----------- |
33+
| back | triggers when right side is clicked | — |
34+
35+
### Slots
36+
| slot | Description |
37+
|---------- | ---------------------- |
38+
| title | title content |
39+
| content | content |

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
## PageHeader
2+
3+
If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
4+
5+
### Basic
6+
7+
:::demo
8+
```html
9+
<el-page-header @back="goBack" content="detail">
10+
</el-page-header>
11+
12+
<script>
13+
export default {
14+
methods: {
15+
goBack() {
16+
console.log('go back');
17+
}
18+
}
19+
}
20+
</script>
21+
```html
22+
:::
23+
24+
### Attributes
25+
| Attribute | Description | Type | Accepted Values | Default |
26+
|---------- |-------------- |---------- |------------------------------ | ------ |
27+
| title | main title | string | — | Back |
28+
| content | content | string | — | — |
29+
30+
### Events
31+
| Event Name | Description | Parameters |
32+
|----------- |-------------- |----------- |
33+
| back | triggers when right side is clicked | — |
34+
35+
### Slots
36+
| slot | Description |
37+
|---------- | ---------------------- |
38+
| title | title content |
39+
| content | content |

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
## PageHeader 页头
2+
3+
如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
4+
5+
### 基础
6+
7+
:::demo
8+
```html
9+
<el-page-header @back="goBack" content="详情页面">
10+
</el-page-header>
11+
12+
<script>
13+
export default {
14+
methods: {
15+
goBack() {
16+
console.log('go back');
17+
}
18+
}
19+
}
20+
</script>
21+
```
22+
:::
23+
24+
### Attributes
25+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
26+
|---------- |-------------- |---------- |------------------------------ | ------ |
27+
| title | 标题 | string | — | 返回 |
28+
| content | 内容 | string | — | — |
29+
30+
31+
### Events
32+
| 事件名称 | 说明 | 回调参数 |
33+
|---------- |-------------- |---------- |
34+
| back | 点击左侧区域触发 | — |
35+
36+
### Slots
37+
| 事件名称 | 说明 |
38+
|---------- |------------- |
39+
| title | 标题内容 |
40+
| content | 内容 |

‎examples/nav.config.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,10 @@
215215
"path": "/breadcrumb",
216216
"title": "Breadcrumb 面包屑"
217217
},
218+
{
219+
"path": "/page-header",
220+
"title": "PageHeader 页头"
221+
},
218222
{
219223
"path": "/dropdown",
220224
"title": "Dropdown 下拉菜单"
@@ -497,6 +501,10 @@
497501
"path": "/breadcrumb",
498502
"title": "Breadcrumb"
499503
},
504+
{
505+
"path": "/page-header",
506+
"title": "PageHeader"
507+
},
500508
{
501509
"path": "/dropdown",
502510
"title": "Dropdown"
@@ -779,6 +787,10 @@
779787
"path": "/breadcrumb",
780788
"title": "Breadcrumb"
781789
},
790+
{
791+
"path": "/page-header",
792+
"title": "PageHeader"
793+
},
782794
{
783795
"path": "/dropdown",
784796
"title": "Dropdown"
@@ -1061,6 +1073,10 @@
10611073
"path": "/breadcrumb",
10621074
"title": "Breadcrumb"
10631075
},
1076+
{
1077+
"path": "/page-header",
1078+
"title": "PageHeader"
1079+
},
10641080
{
10651081
"path": "/dropdown",
10661082
"title": "Dropdown"

‎packages/page-header/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import PageHeader from './src/main';
2+
3+
/* istanbul ignore next */
4+
PageHeader.install = function(Vue) {
5+
Vue.component(PageHeader.name, PageHeader);
6+
};
7+
8+
export default PageHeader;

‎packages/page-header/src/main.vue

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div class="el-page-header">
3+
<div class="el-page-header__left" @click="$emit('back')">
4+
<i class="el-icon-back"></i>
5+
<div class="el-page-header__title">
6+
<slot name="title">{{ title }}</slot>
7+
</div>
8+
</div>
9+
<div class="el-page-header__content">
10+
<slot name="content">{{ content }}</slot>
11+
</div>
12+
</div>
13+
</template>
14+
15+
<script>
16+
import { t } from 'element-ui/src/locale';
17+
export default {
18+
name: 'ElPageHeader',
19+
20+
props: {
21+
title: {
22+
type: String,
23+
default() {
24+
return t('el.pageHeader.title');
25+
}
26+
},
27+
content: String
28+
}
29+
};
30+
</script>

‎packages/theme-chalk/src/index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,4 @@
7272
@import "./image.scss";
7373
@import "./calendar.scss";
7474
@import "./backtop.scss";
75+
@import "./page-header.scss";

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@import "mixins/mixins";
2+
@import "common/var";
3+
4+
@include b(page-header) {
5+
display: flex;
6+
line-height: 24px;
7+
8+
@include e(left) {
9+
display: flex;
10+
cursor: pointer;
11+
margin-right: 40px;
12+
position: relative;
13+
14+
&::after {
15+
content: "";
16+
position: absolute;
17+
width: 1px;
18+
height: 16px;
19+
right: -20px;
20+
top: 50%;
21+
transform: translateY(-50%);
22+
background-color: $--border-color-base;
23+
}
24+
25+
.el-icon-back {
26+
font-size: 18px;
27+
margin-right: 6px;
28+
align-self: center;
29+
}
30+
31+
@include e(title) {
32+
font-size: 14px;
33+
font-weight: 500;
34+
}
35+
}
36+
37+
@include e(content) {
38+
font-size: 18px;
39+
color: $--color-text-primary;
40+
}
41+
}

0 commit comments

Comments
 (0)