Layout (Row и Col)

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

Компонент Row

Row представляет собой контейнер, который управляет расположением колонок внутри себя. Основные свойства компонента:

  • gutter – задаёт расстояние между колонками (в пикселях или массивом для разных размеров экранов).

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

  • type – определяет способ расположения колонок. Значение 'flex' включает flex-контейнер, что позволяет использовать дополнительные возможности выравнивания.

  • justify – управляет горизонтальным выравниванием колонок при использовании type="flex". Возможные значения:

    • start – по левому краю (по умолчанию)
    • end – по правому краю
    • center – по центру
    • space-between – равномерное распределение с крайними колонками по краям
    • space-around – равномерное распределение с отступами вокруг каждой колонки

  • align – вертикальное выравнивание колонок (только при type="flex"):

    • top – выравнивание по верхнему краю
    • middle – выравнивание по центру
    • bottom – выравнивание по нижнему краю

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

<el-row type="flex" justify="space-around" align="middle" :gutter="20">
  <el-col :span="6">Колонка A</el-col>
  <el-col :span="6">Колонка B</el-col>
  <el-col :span="6">Колонка C</el-col>
</el-row>

Компонент Col

Col используется для создания колонок внутри Row. Основные свойства:

  • span – ширина колонки в единицах сетки (от 1 до 24). Пример: :span="12" занимает половину ширины контейнера.
  • offset – сдвиг колонки вправо на указанное количество единиц сетки.
  • push и pull – перемещение колонки вправо или влево на указанное количество единиц сетки, позволяя изменять порядок визуального отображения.
  • xs, sm, md, lg, xl, xxl – адаптивные настройки для разных размеров экранов. Позволяют менять span, offset и другие параметры в зависимости от ширины устройства.

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

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

Расстояние между колонками: Gutter

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

<el-row :gutter="[10, 20]">
  <el-col :span="12">Колонка 1</el-col>
  <el-col :span="12">Колонка 2</el-col>
</el-row>
  • Первый элемент массива задаёт горизонтальный отступ.
  • Второй элемент массива задаёт вертикальный отступ.

Flex-макеты и выравнивание

При type="flex" Row становится flex-контейнером. Основные возможности:

  • justify позволяет распределять колонки горизонтально.
  • align выравнивает колонки по вертикали.
  • Комбинация span, offset, push и pull с flex Row позволяет создавать сложные макеты, где колонки могут менять позицию в зависимости от контента и размеров экрана.

Вложенные Row и Col

Для сложных макетов допускается вложенность:

<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">Колонка 2</el-col>
</el-row>

Такой подход позволяет строить многоуровневые сетки с гибкой структурой.

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

  • Всегда использовать gutter для создания визуального пространства между колонками.
  • Для адаптивного дизайна применять свойства xs, sm, md, lg, xl, xxl.
  • Для центровки или распределения элементов использовать type="flex" с justify и align.
  • Вложенные Row помогают организовать сложные макеты без дополнительного CSS.

Система Row и Col в Element Plus обеспечивает простое и гибкое управление сеткой, делая интерфейсы адаптивными и аккуратными на всех устройствах. Она сочетает традиционную 24-единичную сетку с возможностями flex-контейнера, что позволяет реализовывать как классические, так и современные макеты.

Оглавление