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

Element Plus предоставляет гибкую систему сеток, основанную на принципах flexbox, которая позволяет создавать адаптивные и отзывчивые интерфейсы. Основные элементы сетки — это <el-row> и <el-col>, где row задаёт строку, а col — колонку внутри строки.

<el-row :gutter="20">
  <el-col :span="8">Колонка 1</el-col>
  <el-col :span="8">Колонка 2</el-col>
  <el-col :span="8">Колонка 3</el-col>
</el-row>

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

  • :gutter — задаёт отступы между колонками. Может быть числом (в пикселях) или массивом [горизонтальный, вертикальный].
  • :span — количество колонок из 24, которые занимает <el-col>.

Отзывчивость и брейкпоинты

Element Plus поддерживает адаптивное распределение колонок для разных разрешений экрана. Система использует стандартные брейкпоинты:

Брейкпоинт Минимальная ширина
xs < 576px
sm ≥ 576px
md ≥ 768px
lg ≥ 992px
xl ≥ 1200px
xxl ≥ 1600px

Каждой колонке можно задать индивидуальные значения span и offset для разных экранов:

<el-row :gutter="20">
  <el-col :xs="24" :sm="12" :md="8" :lg="6">Колонка</el-col>
</el-row>

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

  • :xs="24" — на маленьких экранах колонка займёт всю ширину.
  • :sm="12" — на экранах ≥576px колонка займёт половину ширины.
  • :md="8" — на экранах ≥768px колонка займёт треть ширины (24/8 = 3 колонки).
  • :lg="6" — на больших экранах колонка займёт четверть ширины.

Offsets, Push и Pull

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

  • :offset — сдвиг вправо на указанное количество колонок.
  • :push — перемещение колонки вправо.
  • :pull — перемещение колонки влево.

Пример:

<el-row :gutter="20">
  <el-col :span="8" :offset="4">Колонка с отступом</el-col>
</el-row>

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

Вложенные сетки

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

<el-row :gutter="20">
  <el-col :span="12">
    <el-row :gutter="10">
      <el-col :span="12">Внутренняя 1</el-col>
      <el-col :span="12">Внутренняя 2</el-col>
    </el-row>
  </el-col>
  <el-col :span="12">Внешняя колонка</el-col>
</el-row>

Горизонтальное и вертикальное выравнивание

Элементы <el-row> поддерживают выравнивание по горизонтали и вертикали с помощью атрибутов justify и align.

Примеры значений justify:

  • start — по левому краю
  • center — по центру
  • end — по правому краю
  • space-between — равное распределение с промежутками
  • space-around — равные промежутки вокруг колонок

Примеры значений align:

  • top — выравнивание по верхнему краю
  • middle — по центру по вертикали
  • bottom — по нижнему краю
<el-row :gutter="20" justify="center" align="middle">
  <el-col :span="6">Центрированная колонка</el-col>
</el-row>

Адаптивные отступы (gutter)

gutter можно задавать динамически через объект для разных экранов:

<el-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
  <el-col :span="6">Колонка 1</el-col>
  <el-col :span="6">Колонка 2</el-col>
</el-row>

Таким образом, интерфейс остаётся аккуратным на любых устройствах.

Адаптивные скрытия и отображения

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

<el-col :xs="24" :sm="12" :md="8" v-show="isVisibleOnMedium">
  Колонка, видимая только на md+
</el-col>

В сочетании с динамическими span и offset это даёт полный контроль над макетом для любых разрешений.

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

Оглавление