Компонент v-row

Компонент v-row является основой сеточной системы Vuetify и предназначен для организации элементов интерфейса в строки с гибкой компоновкой. Он работает в связке с компонентом v-col, создавая адаптивные и отзывчивые макеты, которые легко масштабируются под различные разрешения экранов.

Сеточная система Vuetify построена на 12-колоночной модели, аналогичной Bootstrap. Каждая строка (v-row) может содержать несколько колонок (v-col), сумма ширин которых не должна превышать 12 единиц, хотя Vuetify позволяет автоматическое распределение при использовании специальных свойств.

Атрибуты v-row

1. align – вертикальное выравнивание колонок. Возможные значения:

  • start – выравнивание по верхнему краю строки.
  • center – выравнивание по центру строки.
  • end – выравнивание по нижнему краю строки.
  • stretch – растягивание колонок на всю высоту строки.
  • baseline – выравнивание по базовой линии текста.

2. justify – горизонтальное распределение колонок. Значения:

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

3. dense – уменьшает вертикальные промежутки между колонками, создавая более компактный вид.

4. no-gutters – убирает стандартные отступы (gutter) между колонками.

5. tag – позволяет заменить HTML-тег строки на любой другой, например <section> или <div>.

Примеры базового использования

<v-row>
  <v-col cols="4">
    Первая колонка
  </v-col>
  <v-col cols="4">
    Вторая колонка
  </v-col>
  <v-col cols="4">
    Третья колонка
  </v-col>
</v-row>

В этом примере каждая колонка занимает четверть ширины строки. Если сумма колонок превышает 12, Vuetify автоматически переносит лишние колонки на следующую строку.

Адаптивность и брейкпоинты

v-row в сочетании с v-col поддерживает адаптивные брейкпоинты:

  • cols – количество колонок для всех экранов.
  • xs, sm, md, lg, xl – количество колонок для разных размеров экрана.

Пример:

<v-row>
  <v-col cols="12" sm="6" md="4">
    Контент 1
  </v-col>
  <v-col cols="12" sm="6" md="4">
    Контент 2
  </v-col>
  <v-col cols="12" sm="12" md="4">
    Контент 3
  </v-col>
</v-row>

Здесь на мобильных устройствах все колонки будут занимать всю ширину (cols="12"), на малых экранах (sm) первые две колонки займут половину ширины, а третья – всю строку, на средних экранах (md) все колонки будут занимать треть строки.

Межколоночные отступы (Gutters)

v-row по умолчанию создает горизонтальные и вертикальные отступы между колонками. Их можно настроить с помощью пропсов:

  • dense – уменьшение вертикальных отступов.
  • no-gutters – полное удаление отступов.
  • gutter-x / gutter-y – индивидуальная настройка горизонтальных и вертикальных промежутков (в последних версиях Vuetify).
<v-row dense>
  <v-col cols="6">
    Сжатая колонка
  </v-col>
  <v-col cols="6">
    Сжатая колонка
  </v-col>
</v-row>

Работа с флексами

v-row использует Flexbox для управления размещением колонок. Это позволяет задавать:

  • align для вертикального позиционирования.
  • justify для горизонтального распределения.
  • wrap / no-wrap – управление переносом колонок на новую строку.

Пример с выравниванием и переносом:

<v-row align="center" justify="space-around" wrap>
  <v-col cols="3">Элемент 1</v-col>
  <v-col cols="3">Элемент 2</v-col>
  <v-col cols="3">Элемент 3</v-col>
</v-row>

В этом примере все колонки выровнены по центру вертикально, равномерно распределены по горизонтали, а если ширина экрана меньше, колонки автоматически переносятся на новую строку.

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

v-row поддерживает вложенные ряды для создания сложных макетов:

<v-row>
  <v-col cols="8">
    Основной контент
    <v-row>
      <v-col cols="6">Вложенная колонка 1</v-col>
      <v-col cols="6">Вложенная колонка 2</v-col>
    </v-row>
  </v-col>
  <v-col cols="4">
    Сайдбар
  </v-col>
</v-row>

Вложенные ряды наследуют Flexbox-поведение, позволяя гибко комбинировать несколько уровней компоновки.

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

  • Использовать брейкпоинты для адаптивности интерфейса.
  • Контролировать вертикальные и горизонтальные отступы через dense и no-gutters.
  • Использовать Flex-параметры (align, justify) для точного позиционирования.
  • Для сложных макетов применять вложенные строки, чтобы сохранить управляемую структуру.

v-row обеспечивает гибкость и мощность при построении интерфейсов, позволяя создавать как простые сетки, так и сложные адаптивные макеты с минимальным количеством кода.

Оглавление