Адаптивные breakpoints

Element Plus предоставляет мощную систему для работы с адаптивной версткой через breakpoints, позволяя гибко управлять отображением компонентов в зависимости от ширины экрана. Breakpoints в Element Plus интегрированы в Grid-систему, компоненты Layout и утилиты для управления видимостью элементов.

Система breakpoints

В Element Plus определены стандартные точки перелома (breakpoints), соответствующие типовым размерам устройств:

Имя Минимальная ширина
xs 0px
sm 576px
md 768px
lg 992px
xl 1200px
xxl 1600px

Эти значения используются для Grid, Flex Layout и других компонентов, где требуется адаптивная логика.

Grid-система и breakpoints

Контейнеры и колонки

Для построения адаптивных макетов Element Plus использует компоненты ElRow и ElCol. Пример базовой структуры:

<template>
  <el-row :gutter="20">
    <el-col :span="24" :sm="12" :md="8" :lg="6">
      Контент 1
    </el-col>
    <el-col :span="24" :sm="12" :md="8" :lg="6">
      Контент 2
    </el-col>
    <el-col :span="24" :sm="12" :md="8" :lg="6">
      Контент 3
    </el-col>
    <el-col :span="24" :sm="12" :md="8" :lg="6">
      Контент 4
    </el-col>
  </el-row>
</template>

Ключевые моменты:

  • span — ширина колонки на всех устройствах по умолчанию.
  • sm, md, lg, xl — индивидуальные настройки ширины для каждой точки перелома.
  • gutter — промежуток между колонками, автоматически масштабируется в зависимости от ширины экрана.

Адаптивная видимость компонентов

Компоненты Element Plus позволяют скрывать или показывать элементы в зависимости от текущей точки перелома. Например, ElCol поддерживает props для настройки видимости:

<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
  Адаптивный блок
</el-col>

Если требуется полностью скрывать элемент на определённой ширине, можно использовать CSS-классы утилит или директиву v-show с реактивной переменной, отслеживающей текущую ширину окна:

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const windowWidth = ref(window.innerWidth)

const updateWidth = () => {
  windowWidth.value = window.innerWidth
}

onMounted(() => window.addEventListener('resize', updateWidth))
onUnmounted(() => window.removeEventListener('resize', updateWidth))
</script>

<template>
  <el-col v-show="windowWidth >= 768">
    Показывается только на md и выше
  </el-col>
</template>

Использование breakpoints с Layout

Компоненты ElContainer, ElHeader, ElAside, ElMain и ElFooter могут адаптироваться под разные устройства:

<el-container>
  <el-aside :width="isMobile ? '0' : '200px'">
    Боковая панель
  </el-aside>
  <el-container>
    <el-header>Шапка</el-header>
    <el-main>Основной контент</el-main>
  </el-container>
</el-container>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

const windowWidth = ref(window.innerWidth)
const isMobile = computed(() => windowWidth.value < 768)

const updateWidth = () => {
  windowWidth.value = window.innerWidth
}

onMounted(() => window.addEventListener('resize', updateWidth))
onUnmounted(() => window.removeEventListener('resize', updateWidth))
</script>

Здесь используется реактивная проверка ширины окна, чтобы динамически скрывать боковую панель на мобильных устройствах.

Адаптивные утилиты для компонентов

Некоторые элементы Element Plus имеют встроенные адаптивные возможности:

  • ElMenu — можно менять режим (horizontal / vertical) в зависимости от ширины экрана.
  • ElDrawer — для мобильных устройств часто используют size="100%" при малой ширине.
  • ElTable — можно управлять колонками через v-if или динамически менять видимость колонок на разных breakpoints.

Пример динамической таблицы:

<el-table :data="tableData">
  <el-table-column prop="name" label="Имя"></el-table-column>
  <el-table-column v-if="windowWidth >= 768" prop="email" label="Email"></el-table-column>
  <el-table-column prop="role" label="Роль"></el-table-column>
</el-table>

Настройка пользовательских breakpoints

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

import { ElConfigProvider } from 'element-plus'

app.use(ElConfigProvider, {
  breakpoints: {
    xs: 0,
    sm: 600,
    md: 900,
    lg: 1200,
    xl: 1536,
    xxl: 1920
  }
})

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

Практические рекомендации

  • Всегда использовать :span по умолчанию для базового отображения на всех устройствах.
  • Подключать sm, md, lg и xl только при необходимости изменения расположения элементов.
  • Комбинировать Grid и Layout для гибкого построения адаптивных страниц.
  • Проверять видимость компонентов на реальных устройствах или через эмулятор в DevTools.

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

Оглавление