Container layouts

Основы контейнеров

В библиотеке Element Plus для организации интерфейса используются контейнерные компоненты, которые обеспечивают структурирование страниц и управление расположением элементов. Основные компоненты для контейнеров:

  • <el-container> — базовый контейнер, который может содержать дочерние компоненты header, aside, main, footer.
  • <el-header> — верхняя панель страницы, обычно используется для навигации или заголовка.
  • <el-aside> — боковая панель для меню, фильтров или дополнительной информации.
  • <el-main> — центральная область, предназначенная для основного контента.
  • <el-footer> — нижняя панель для подвала или информации о сайте.

Все эти компоненты работают по принципу flex-контейнера, что обеспечивает гибкость при построении макета.

<template>
  <el-container style="height: 100vh;">
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Sidebar</el-aside>
      <el-main>Main Content</el-main>
    </el-container>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

Свойства <el-container>

  • direction — направление контейнера (vertical или horizontal). По умолчанию horizontal. Используется для управления расположением дочерних элементов.
  • height — задаёт высоту контейнера. Можно использовать пиксели, проценты или vh.
  • style / class — стандартные способы управления стилями, включая флекс-настройки и отступы.

Оба компонента поддерживают фиксированную высоту, заданную через height:

<el-header height="60px">Navigation Bar</el-header>
<el-footer height="50px">Footer Information</el-footer>

Особенности:

  • Header часто фиксируется в верхней части страницы с помощью CSS (position: fixed; top: 0; width: 100%;) для постоянного отображения.
  • Footer может быть «липким» внизу страницы, обеспечивая равномерное заполнение контентной области.

<el-aside>

Боковая панель может иметь фиксированную ширину и поддерживает адаптивное скрытие через медиазапросы или динамическое управление v-if/v-show:

<el-aside width="250px">
  <el-menu>
    <el-menu-item index="1">Home</el-menu-item>
    <el-menu-item index="2">About</el-menu-item>
  </el-menu>
</el-aside>
  • width задаёт ширину панели. Может быть в пикселях или процентах.
  • Для вертикального расположения меню внутри <el-aside> используется компонент <el-menu>.

<el-main>

Главная область, которая занимает оставшееся пространство контейнера. Важные моменты:

  • Не задавать фиксированную ширину/высоту, чтобы flex-контейнер корректно распределял пространство.
  • Можно комбинировать с внутренними сетками или карточками для создания сложного контента.
  • Поддерживает прокрутку содержимого через overflow: auto.
<el-main style="padding: 20px; overflow-y: auto;">
  <div v-for="item in items" :key="item.id">{{ item.name }}</div>
</el-main>

Вложенные контейнеры

Element Plus позволяет создавать вложенные контейнеры, что удобно для сложных макетов:

<el-container>
  <el-aside width="200px">Sidebar</el-aside>
  <el-container direction="vertical">
    <el-header height="60px">Top Header</el-header>
    <el-main>Main Content Area</el-main>
    <el-footer height="50px">Footer</el-footer>
  </el-container>
</el-container>

Особенности вложенности:

  • Вложенные контейнеры наследуют гибкость flex-контейнера.
  • Можно комбинировать горизонтальное и вертикальное направление через direction.

Адаптивные макеты

Для создания адаптивного интерфейса используют:

  1. Проценты и vh/vw — для гибкой ширины и высоты.
  2. Медиазапросы — скрытие боковой панели при малой ширине экрана.
  3. Динамические свойства — v-if, v-show для управления видимостью контейнеров.
<el-aside v-if="isDesktop" width="200px">Sidebar</el-aside>

Ключевые советы по макетам

  • Всегда использовать <el-main> как гибкую область.
  • Фиксированные размеры задавать только для <el-header>, <el-footer> и <el-aside>.
  • Для сложных страниц использовать вложенные контейнеры с разными направлениями (horizontal / vertical).
  • Контейнеры автоматически поддерживают flex-логики, поэтому не требуется дополнительное CSS для базового позиционирования.

Практический пример: дашборд

<el-container style="height: 100vh;">
  <el-header height="70px">Dashboard Header</el-header>
  <el-container>
    <el-aside width="220px">
      <el-menu default-active="1" router>
        <el-menu-item index="1">Home</el-menu-item>
        <el-menu-item index="2">Reports</el-menu-item>
        <el-menu-item index="3">Settings</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card>Card 1</el-card>
        </el-col>
        <el-col :span="8">
          <el-card>Card 2</el-card>
        </el-col>
        <el-col :span="8">
          <el-card>Card 3</el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
  <el-footer height="60px">© 2026 Company</el-footer>
</el-container>

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

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

Оглавление