Spacing utilities

Vuetify предоставляет удобный набор инструментов для управления отступами и расстояниями между элементами интерфейса. Эти утилиты помогают быстро задавать margin и padding без необходимости написания кастомных CSS-классов.

Система обозначений

Классы для spacing строятся по следующей схеме:

{свойство}-{направление}-{размер}

  • Свойство:

    • m — margin (внешний отступ)
    • p — padding (внутренний отступ)

  • Направление:

    • t — top (сверху)
    • b — bottom (снизу)
    • l — left (слева)
    • r — right (справа)
    • x — горизонтально (left + right)
    • y — вертикально (top + bottom)
    • отсутствие — применяет ко всем четырём сторонам

  • Размер:

    • Цифровой индекс от 0 до 12, соответствующий кратным базовой величине spacing (обычно 4px * n)
    • 0 — отступ отсутствует
    • 1-12 — отступ от 4px до 48px (по умножению на базовую единицу)

Примеры:

<div class="mt-4">Отступ сверху 16px</div>
<div class="mx-2">Горизонтальные отступы 8px</div>
<div class="p-6">Padding 24px со всех сторон</div>

Инкрементные размеры и их применение

Размеры 0–12 образуют шкалу, согласованную с сеткой Vuetify, что позволяет легко интегрировать spacing с другими компонентами и layout-системой.

  • Малые отступы (1–3) удобны для тонких разделителей и внутренних элементов.
  • Средние (4–6) применяются для отдельных блоков или карточек.
  • Крупные (7–12) подходят для основного контента и крупных секций страницы.

Утилиты для автоматического центрирования и выравнивания

Spacing utilities также могут сочетаться с другими классами выравнивания:

<div class="mx-auto my-8" style="width: 200px; background: #ccc;">
  Центрированная карточка с вертикальным отступом
</div>
  • mx-auto — автоматически выравнивает элемент по горизонтали
  • my-8 — вертикальный отступ 32px

Responsive варианты

Vuetify позволяет задавать разные значения отступов для различных экранов с использованием префиксов:

{свойство}-{направление}-{размер}-{breakpoint}

  • Breakpoint:

    • xs — <600px
    • sm — ≥600px
    • md — ≥960px
    • lg — ≥1264px
    • xl — ≥1904px

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

<div class="p-2 sm:p-4 md:p-6 lg:p-8 xl:p-10">
  Padding изменяется в зависимости от ширины экрана
</div>

Сочетание с Grid и Flex

Spacing utilities идеально интегрируются с компонентами v-container, v-row, v-col, а также с flex-классами. Например:

<v-row class="pa-4">
  <v-col class="mb-4">
    Первый блок с нижним отступом
  </v-col>
  <v-col class="mb-4">
    Второй блок с таким же отступом
  </v-col>
</v-row>
  • pa-4 задаёт padding всем колонкам внутри ряда
  • mb-4 добавляет равномерный нижний отступ между колонками

Пользовательские значения

Vuetify позволяет переопределять стандартные размеры spacing через SCSS переменные:

$spacing: (
  0: 0px,
  1: 2px,
  2: 6px,
  3: 12px,
  4: 20px,
  5: 28px,
  6: 36px,
  7: 44px,
  8: 52px,
  9: 60px,
  10: 68px,
  11: 76px,
  12: 84px
);

После этого все классы типа m-4 или p-6 будут соответствовать новым значениям.

Комбинирование классов

Классы spacing можно комбинировать для более сложных макетов:

<div class="pt-6 pb-2 px-4">
  Padding сверху 24px, снизу 8px, слева и справа 16px
</div>

Такое комбинирование позволяет точно настроить расстояния внутри элементов без дополнительного CSS.

Итоговая структура использования

  1. Определить, нужен margin или padding
  2. Выбрать направление
  3. Задать размер в пределах 0–12
  4. При необходимости использовать breakpoint для адаптивности
  5. Сочетать с другими классами Vuetify для grid или flex

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

Оглавление