Page Header

Компонент Page Header в библиотеке Element Plus используется для создания верхнего блока страницы, содержащего заголовок, описание и элементы навигации, такие как кнопка возврата. Он является удобным инструментом для организации структуры интерфейса и улучшения пользовательского опыта при переходах между страницами.

<template>
  <el-page-header
    title="Заголовок страницы"
    content="Описание страницы"
    @back="handleBack">
  </el-page-header>
</template>

<script>
export default {
  methods: {
    handleBack() {
      console.log('Нажата кнопка назад');
      this.$router.back();
    }
  }
}
</script>
  • title — основной заголовок страницы. Может быть строкой или элементом Vue, если требуется кастомизация.
  • content — дополнительное описание под заголовком. Полезно для краткого пояснения контекста страницы.
  • @back — событие, которое вызывается при клике на кнопку возврата. Обычно используется для навигации назад.

Настройка кнопки возврата

Компонент по умолчанию отображает кнопку «назад» слева от заголовка. Для скрытия этой кнопки используется свойство :back-text="''" или полное скрытие через CSS. Также можно заменить стандартную иконку на любую кастомную с помощью слота icon.

<el-page-header @back="handleBack">
  <template #icon>
    <el-icon><ArrowLeft /></el-icon>
  </template>
  <template #content>
    Подробное описание текущего раздела
  </template>
</el-page-header>
  • #icon — слот для пользовательской иконки кнопки возврата.
  • #content — слот для кастомного контента под заголовком.

Интеграция с навигацией

Компонент Page Header часто комбинируется с Vue Router для создания единообразной навигации. При этом событие @back можно привязать к $router.back() или к любому кастомному обработчику маршрутов.

methods: {
  handleBack() {
    if (this.previousPage) {
      this.$router.push(this.previousPage);
    } else {
      this.$router.back();
    }
  }
}

Добавление дополнительных элементов

Page Header поддерживает слоты для размещения дополнительных элементов управления, например кнопок действий или индикаторов состояния:

<el-page-header title="Профиль пользователя">
  <template #extra>
    <el-button type="primary" @click="saveChanges">Сохранить</el-button>
    <el-button @click="cancelChanges">Отменить</el-button>
  </template>
</el-page-header>
  • #extra — слот для размещения дополнительных интерактивных элементов, обычно справа от заголовка.
  • Можно комбинировать слоты icon, content и extra для создания сложных заголовков с кастомной версткой.

Стилизация и адаптивность

Page Header легко стилизуется через стандартные CSS-классы или через встроенные свойства Element Plus. Компонент адаптивен и корректно отображается на мобильных устройствах:

.el-page-header {
  background-color: #f5f5f5;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}
.el-page-header__title {
  font-size: 18px;
  font-weight: 600;
}
.el-page-header__content {
  color: #909399;
  margin-top: 4px;
}
  • el-page-header — основной контейнер компонента.
  • **el-page-header__title** — класс заголовка.
  • **el-page-header__content** — класс описания.

Анимация и интерактивность

Для улучшения UX можно добавить плавные анимации при наведении или при смене контента:

.el-page-header__title {
  transition: color 0.3s ease;
}
.el-page-header__title:hover {
  color: #409EFF;
}

Итоговые возможности компонента

  • Заголовок и описание: гибко настраиваемые через свойства и слоты.
  • Кнопка возврата: стандартная или кастомная, с привязкой к маршрутам.
  • Дополнительные элементы: кнопки, индикаторы, иконки через слот extra.
  • Стилизация: CSS или встроенные классы.
  • Адаптивность и интерактивность: готов к мобильным устройствам и анимации.

Эта структура позволяет строить единообразные верхние блоки страниц с возможностью полной кастомизации под дизайн приложения, обеспечивая удобство навигации и визуальную консистентность интерфейса.

Оглавление