Порядок колонок

Vuetify использует систему сетки, основанную на Flexbox, которая позволяет гибко управлять расположением колонок и их порядком внутри строки (v-row). Основной инструмент управления порядком колонок — это свойства order и responsive-версии order-{breakpoint}-{value}.

Свойство order

Каждая колонка (v-col) имеет по умолчанию order: 0. Порядок колонок внутри строки определяется числовыми значениями свойства order. Колонки с меньшими значениями будут располагаться раньше, чем с большими. Например:

<v-row>
  <v-col cols="4" order="2">
    Колонка 1
  </v-col>
  <v-col cols="4" order="1">
    Колонка 2
  </v-col>
  <v-col cols="4" order="3">
    Колонка 3
  </v-col>
</v-row>

В данном случае визуально первым элементом будет Колонка 2, затем Колонка 1, и последней — Колонка 3, несмотря на порядок объявления в шаблоне.

Адаптивный порядок колонок

Vuetify поддерживает responsive-версии свойства order, что позволяет изменять порядок колонок в зависимости от ширины экрана. Синтаксис:

order-{breakpoint}-{value}

Где breakpoint может быть:

  • xs — очень маленькие устройства
  • sm — маленькие устройства
  • md — средние устройства
  • lg — большие устройства
  • xl — очень большие устройства

Пример адаптивного порядка:

<v-row>
  <v-col cols="12" md="4" order-md="3">
    Колонка A
  </v-col>
  <v-col cols="12" md="4" order-md="1">
    Колонка B
  </v-col>
  <v-col cols="12" md="4" order-md="2">
    Колонка C
  </v-col>
</v-row>

На маленьких экранах (xs, sm) порядок колонок будет естественным (A → B → C), а на средних и больших экранах (md и выше) порядок изменится на B → C → A.

Использование отрицательных значений

Для более тонкого управления можно использовать отрицательные значения order. Это позволяет переместить колонку в начало строки независимо от других:

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

В этом примере колонка с order="-1" будет первой, остальные сохранят стандартный порядок 0.

Комбинация с выравниванием и направлением

Порядок колонок можно комбинировать с такими свойствами строки как:

  • justify — управление горизонтальным выравниванием
  • align — управление вертикальным выравниванием
  • reverse — изменение направления потоков

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

<v-row justify="space-between" align="center" class="flex-row-reverse">
  <v-col cols="3" order="2">Колонка 1</v-col>
  <v-col cols="3" order="1">Колонка 2</v-col>
  <v-col cols="3" order="3">Колонка 3</v-col>
</v-row>

Сочетание flex-row-reverse и order позволяет создавать сложные макеты с нестандартным расположением колонок.

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

  • Минимизировать использование фиксированных order: по возможности, лучше менять порядок через разметку, чтобы код оставался предсказуемым.
  • Использовать responsive-order для адаптивности: это позволяет легко переставлять колонки на разных устройствах без дублирования кода.
  • Комбинировать с v-show/v-if для мобильных версий: иногда проще скрыть колонку на малых экранах, чем менять её порядок.

Система порядка колонок в Vuetify предоставляет мощный инструмент для создания гибких и адаптивных макетов, где визуальное расположение элементов можно изменять без перестройки HTML-разметки.

Оглавление