Container

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

<el-container>

el-container — базовый элемент, который выступает родительским контейнером для других компонентов структуры страницы. Он может быть вложенным, создавая сложные макеты с несколькими уровнями разделов.

Пример использования:

<el-container style="height: 100vh;">
  <el-header>Заголовок</el-header>
  <el-container>
    <el-aside width="200px">Боковая панель</el-aside>
    <el-main>Основной контент</el-main>
  </el-container>
  <el-footer>Футер</el-footer>
</el-container>

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

  • el-container автоматически управляет высотой дочерних элементов.
  • Поддерживает как горизонтальные, так и вертикальные макеты при использовании вложенных контейнеров.
  • Можно комбинировать с CSS Grid и Flexbox для более точного позиционирования.

el-header и el-footer предназначены для верхней и нижней частей макета соответственно.

Свойства:

  • height — задаёт высоту в пикселях или процентах.
  • style — позволяет применять кастомные стили.

Пример настройки:

<el-header height="60px" style="background-color: #409EFF; color: white;">
  Навигация
</el-header>
<el-footer height="40px" style="text-align: center;">
  © 2026 Компания
</el-footer>

<el-aside>

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

Ключевые свойства:

  • width — ширина панели, может задаваться в пикселях (200px) или процентах (20%).
  • style — позволяет настроить цвет, фон или отступы.

Пример боковой панели:

<el-container>
  <el-aside width="250px" style="background-color: #f2f2f2;">
    Меню
  </el-aside>
  <el-main>
    Основное содержимое
  </el-main>
</el-container>

Особенности использования:

  • При вложении нескольких el-aside можно создавать многоколоночные макеты.
  • el-aside автоматически занимает оставшееся пространство в горизонтальном контейнере, если ширина не задана.

<el-main>

el-main предназначен для основного содержимого страницы.

Свойства и поведение:

  • Занимает всю доступную площадь контейнера, за исключением пространства, занимаемого el-header, el-footer и el-aside.
  • Можно использовать для вложенных el-container, создавая сложные макеты.

Пример использования с прокруткой:

<el-main style="overflow-y: auto; padding: 20px;">
  <p>Длинный контент...</p>
</el-main>

Вложенные контейнеры и адаптивность

Элемент el-container поддерживает вложенность, что позволяет строить сложные макеты с несколькими колонками и секциями.

Пример многосекционного макета:

<el-container style="height: 100vh;">
  <el-header>Заголовок</el-header>
  <el-container>
    <el-aside width="200px">Навигация</el-aside>
    <el-container>
      <el-main>Основной контент</el-main>
      <el-footer>Дополнительный футер</el-footer>
    </el-container>
  </el-container>
</el-container>

Примечание по адаптивности:

  • Для мобильных устройств боковые панели часто скрываются или заменяются на выдвижные меню.
  • Использование style="overflow: auto" и процентов в ширине и высоте позволяет контейнерам подстраиваться под размеры экрана.

Стилизация контейнеров

Хотя el-container предоставляет базовую структуру, стилизация производится через стандартные CSS-свойства или встроенные style. Основные рекомендации:

  • Использовать Flexbox для вертикального или горизонтального выравнивания: display: flex; flex-direction: column;.
  • Добавлять отступы через padding и margin для внутреннего контента.
  • Управлять цветом и фоном с помощью background-color.

Пример кастомного стиля:

<el-container style="display: flex; flex-direction: column; height: 100vh;">
  <el-header style="background-color: #333; color: white; text-align: center; padding: 15px;">
    Шапка
  </el-header>
  <el-container style="flex: 1; display: flex;">
    <el-aside style="background-color: #f4f4f4; width: 220px; padding: 10px;">
      Меню
    </el-aside>
    <el-main style="padding: 20px;">
      Контент
    </el-main>
  </el-container>
  <el-footer style="background-color: #333; color: white; text-align: center; padding: 10px;">
    Подвал
  </el-footer>
</el-container>

Практические советы

  • Для фиксированной высоты шапки и футера рекомендуется использовать px вместо %.
  • Для адаптивных боковых панелей лучше использовать проценты или медиазапросы.
  • Вложенные el-container помогают разделять макет на логические блоки, например, основное содержимое и дополнительную информацию.
  • Использование el-main с overflow: auto предотвращает выход контента за границы контейнера.

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

Оглавление