mirror of
https://github.com/element-plus/element-plus.git
synced 2025-01-18 10:59:10 +08:00
feat(page-header): add icon props and slots (#1882)
This commit is contained in:
kooriookami
GitHub
parent
b86b360a9b
commit
c5e72c801b
@ -11,6 +11,21 @@ describe('PageHeader.vue', () => {
|
||||
expect(wrapper.find('.el-page-header__content').text()).toEqual(AXIOM)
|
||||
})
|
||||
|
||||
test('should render icon props', () => {
|
||||
const icon = 'el-icon-arrow-left'
|
||||
const wrapper = mount(PageHeader, {
|
||||
props: { icon: icon },
|
||||
})
|
||||
expect(wrapper.find('.el-page-header__icon i').classes()).toContain(icon)
|
||||
})
|
||||
|
||||
test('should render icon slots', () => {
|
||||
const wrapper = mount(PageHeader, {
|
||||
slots: { icon: AXIOM },
|
||||
})
|
||||
expect(wrapper.find('.el-page-header__icon').text()).toEqual(AXIOM)
|
||||
})
|
||||
|
||||
test('slot content', () => {
|
||||
const wrapper = mount(PageHeader, {
|
||||
slots: { content: AXIOM },
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div class="el-page-header">
|
||||
<div class="el-page-header__left" @click="handleClick">
|
||||
<i class="el-icon-back"></i>
|
||||
<div v-if="icon || $slots.icon" class="el-page-header__icon">
|
||||
<slot name="icon">
|
||||
<i :class="icon"></i>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="el-page-header__title">
|
||||
<slot name="title">{{ title }}</slot>
|
||||
</div>
|
||||
@ -11,13 +15,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { t } from '@element-plus/locale'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ElPageHeader',
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'el-icon-back',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: () => t('el.pageHeader.title'),
|
||||
|
||||
@ -22,10 +22,11 @@
|
||||
background-color: $--border-color-base;
|
||||
}
|
||||
|
||||
.#{$namespace}-icon-back {
|
||||
@include e(icon) {
|
||||
font-size: 18px;
|
||||
margin-right: 6px;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@include e(title) {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
|
||||
|
||||
### Basic
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@ -21,9 +21,18 @@ If path of the page is simple, it is recommended to use PageHeader instead of th
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom icon
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-page-header icon="el-icon-arrow-left" content="detail"></el-page-header>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |------------------------------ | ------ |
|
||||
| icon | icon | string | — | el-icon-back |
|
||||
| title | main title | string | — | Back |
|
||||
| content | content | string | — | — |
|
||||
|
||||
@ -35,5 +44,6 @@ If path of the page is simple, it is recommended to use PageHeader instead of th
|
||||
### Slots
|
||||
| Name | Description |
|
||||
|---------- | ---------------------- |
|
||||
| icon | custom icon |
|
||||
| title | title content |
|
||||
| content | content |
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
## PageHeader
|
||||
|
||||
Si la ruta de la página es simple, se recomienda utilizar PageHeader en lugar de Breadcrumb.
|
||||
If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
|
||||
|
||||
### Básico
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@ -21,19 +21,29 @@ Si la ruta de la página es simple, se recomienda utilizar PageHeader en lugar
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
|---------- |-------------- |---------- |------------------------------ | ------ |
|
||||
| title | titulo principal | string | — | Back |
|
||||
| content | contenido | string | — | — |
|
||||
### Custom icon
|
||||
|
||||
### Eventos
|
||||
| Nombre evento | Descripción | Parámetros |
|
||||
:::demo
|
||||
```html
|
||||
<el-page-header icon="el-icon-arrow-left" content="detail"></el-page-header>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |------------------------------ | ------ |
|
||||
| icon | icon | string | — | el-icon-back |
|
||||
| title | main title | string | — | Back |
|
||||
| content | content | string | — | — |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|----------- |-------------- |----------- |
|
||||
| back | se activa cuando se hace clic en el lado derecho | — |
|
||||
| back | triggers when right side is clicked | — |
|
||||
|
||||
### Slots
|
||||
| Nombre del slot | Descripción |
|
||||
| --------------- | ----------- |
|
||||
| title | titulo |
|
||||
| content | contenido |
|
||||
| Name | Description |
|
||||
|---------- | ---------------------- |
|
||||
| icon | custom icon |
|
||||
| title | title content |
|
||||
| content | content |
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
## PageHeader
|
||||
|
||||
Si le chemin de la page est simple, il est recommandé d’utiliser PageHeader au lieu de Breadcrumb.
|
||||
If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
|
||||
|
||||
### Basic
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@ -21,19 +21,29 @@ Si le chemin de la page est simple, il est recommandé d’utiliser PageHeader a
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom icon
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-page-header icon="el-icon-arrow-left" content="detail"></el-page-header>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Valeurs acceptées | Défaut |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |------------------------------ | ------ |
|
||||
| title | titre principal | string | — | Back |
|
||||
| content | contenu | string | — | — |
|
||||
| icon | icon | string | — | el-icon-back |
|
||||
| title | main title | string | — | Back |
|
||||
| content | content | string | — | — |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|----------- |-------------- |----------- |
|
||||
| back | se déclenche lorsque vous cliquez sur le côté droit | — |
|
||||
| back | triggers when right side is clicked | — |
|
||||
|
||||
### Slots
|
||||
| slot | Description |
|
||||
| Name | Description |
|
||||
|---------- | ---------------------- |
|
||||
| title | contenu du titre |
|
||||
| content | contenu |
|
||||
| icon | custom icon |
|
||||
| title | title content |
|
||||
| content | content |
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
## ページヘッダー
|
||||
## PageHeader
|
||||
|
||||
ページのパスがシンプルな場合は、パンくず(Breadcrumb)ではなくPageHeaderを使用することをお勧めします。
|
||||
If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
|
||||
|
||||
### 基本
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@ -21,19 +21,29 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 属性
|
||||
### Custom icon
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-page-header icon="el-icon-arrow-left" content="detail"></el-page-header>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |------------------------------ | ------ |
|
||||
| title | メインタイトル | string | — | Back |
|
||||
| content | 内容 | string | — | — |
|
||||
| icon | icon | string | — | el-icon-back |
|
||||
| title | main title | string | — | Back |
|
||||
| content | content | string | — | — |
|
||||
|
||||
### イベント
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|----------- |-------------- |----------- |
|
||||
| back | 右側をクリックするとトリガー | — |
|
||||
| back | triggers when right side is clicked | — |
|
||||
|
||||
### スロット
|
||||
| slot | Description |
|
||||
### Slots
|
||||
| Name | Description |
|
||||
|---------- | ---------------------- |
|
||||
| title | タイトル |
|
||||
| content | 内容 |
|
||||
| icon | custom icon |
|
||||
| title | title content |
|
||||
| content | content |
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
|
||||
|
||||
### 基础
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@ -21,9 +21,18 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义图标
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-page-header icon="el-icon-arrow-left" content="详情页面"></el-page-header>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |------------------------------ | ------ |
|
||||
| icon | 图标 | string | — | el-icon-back |
|
||||
| title | 标题 | string | — | 返回 |
|
||||
| content | 内容 | string | — | — |
|
||||
|
||||
@ -36,5 +45,6 @@
|
||||
### Slots
|
||||
| 事件名称 | 说明 |
|
||||
|---------- |------------- |
|
||||
| icon | 自定义图标 |
|
||||
| title | 标题内容 |
|
||||
| content | 内容 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user