Responsive utilities

Vuetify предоставляет мощный набор инструментов для построения адаптивного интерфейса на базе системы сеток и утилит. Они позволяют управлять отображением компонентов в зависимости от размеров экрана, обеспечивая корректное масштабирование и перестройку интерфейса на различных устройствах.

Система сеток (Grid System)

Сердцем адаптивности в Vuetify является система сеток, основанная на 12-колоночной структуре. Она включает компоненты <v-container>, <v-row> и <v-col>:

  • <v-container> — задает ограниченную область для контента и отвечает за горизонтальные отступы.
  • <v-row> — формирует строки сетки, управляет горизонтальным выравниванием колонок и промежутками (gutter).
  • <v-col> — определяет колонки и их ширину, которая может быть адаптивной в зависимости от размера экрана.

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

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

В этом примере:

  • cols="12" — колонка занимает всю ширину на маленьких экранах.
  • sm="6" — на устройствах среднего размера колонка занимает половину ширины.
  • md="4" — на больших экранах колонка занимает треть ширины строки.

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

Vuetify предоставляет классы видимости, которые позволяют показывать или скрывать элементы в зависимости от размеров экрана. Основные форматы:

  • d-{breakpoint}-{value}

    • breakpoint — xs, sm, md, lg, xl
    • value — none, block, flex, inline-flex, inline-block

Примеры:

<div class="d-none d-md-block">
  Появляется только на экранах medium и выше
</div>

<div class="d-flex d-sm-none">
  Показывается только на экранах xs
</div>

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

  • d-none скрывает элемент полностью.
  • d-flex делает элемент flex-контейнером.
  • Комбинируя эти классы с точками перелома (xs, sm, md, lg, xl), можно точно контролировать видимость компонентов.

Адаптивные отступы и размеры

Vuetify включает набор утилит для марджинов и паддингов, позволяющих задавать значения в зависимости от размера экрана:

  • Формат: ma-{breakpoint}-{size}, pa-{breakpoint}-{size}

    • m — margin, p — padding
    • a — all sides, t — top, b — bottom, l — left, r — right, x — horizontal, y — vertical
    • size — число от 0 до 5 (0 — 0px, 5 — крупный отступ)

Пример:

<div class="pa-2 pa-md-5">
  Контент с маленьким отступом на мобильных и большим на десктопах
</div>

Адаптивные размеры текста и шрифтов

Для адаптивной типографики Vuetify использует классы:

  • text-{breakpoint}-{size}

    • size — от xs до xl

  • Можно комбинировать с утилитами веса текста (font-weight-*) и выравнивания (text-left, text-center, text-right).

Пример:

<h1 class="text-h5 text-md-h3">
  Заголовок меняет размер с мобильного на десктоп
</h1>

Управление порядком элементов

Для перестройки макета на разных устройствах используется свойство order для колонок:

<v-row>
  <v-col cols="12" md="6" order="2" order-md="1">
    Левый блок на мобильных — снизу, на десктопе — сверху
  </v-col>
  <v-col cols="12" md="6" order="1" order-md="2">
    Правый блок на мобильных — сверху, на десктопе — снизу
  </v-col>
</v-row>

Это позволяет гибко менять расположение элементов в зависимости от размеров экрана без изменения HTML структуры.

Flex-утилиты

Vuetify содержит мощный набор flex-утилит, который работает вместе с адаптивными классами:

  • justify-{breakpoint}-{type} — выравнивание по горизонтали (start, center, end, space-between, space-around, space-evenly)
  • align-{breakpoint}-{type} — выравнивание по вертикали (start, center, end, stretch, baseline)
  • flex-{breakpoint}-{direction} — направление flex-контейнера (row, column, row-reverse, column-reverse)

Пример:

<v-row class="d-flex justify-center justify-md-start">
  <v-col cols="12" md="4">
    Элемент выравнивается по центру на мобильных и слева на десктопе
  </v-col>
</v-row>

Скрытие и адаптация изображений

Vuetify поддерживает адаптивные изображения с помощью компонентов <v-img> и классов видимости:

<v-img
  src="image-small.jpg"
  class="d-sm-none"
></v-img>

<v-img
  src="image-large.jpg"
  class="d-none d-sm-block"
></v-img>

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

Итоговые рекомендации

  • Всегда использовать <v-container>, <v-row> и <v-col> для построения сетки.
  • Применять классы видимости d-{breakpoint}-{value} для условного отображения контента.
  • Настраивать отступы, размеры текста и порядок колонок через адаптивные утилиты.
  • Использовать flex-утилиты для точного выравнивания элементов на разных экранах.
  • Комбинировать утилиты и сетку для создания полностью адаптивного интерфейса без дублирования разметки.

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

Оглавление