Спейсеры v-spacer

v-spacer — это специализированный компонент библиотеки Vuetify, предназначенный для управления распределением пространства между элементами интерфейса. Он автоматически занимает доступное свободное место в родительском контейнере с flex-контейнерной моделью, позволяя выравнивать соседние элементы без необходимости ручного расчёта отступов и маргинов.

В типичной структуре v-spacer используется внутри компонентов v-row, v-toolbar или других flex-контейнеров. Он не имеет визуального представления и служит исключительно для организации пространства.

<template>
  <v-row>
    <v-btn>Кнопка 1</v-btn>
    <v-spacer></v-spacer>
    <v-btn>Кнопка 2</v-btn>
  </v-row>
</template>

В этом примере v-spacer занимает всё свободное пространство между кнопками, выравнивая их по краям контейнера.

Поведение в flex-контейнерах

v-spacer работает только в контейнерах с display: flex. Он использует свойства flex-grow: 1, что позволяет ему растягиваться на всё доступное пространство.

  • Если в контейнере несколько v-spacer, они делят свободное пространство поровну.
  • Элемент до v-spacer остаётся прижатым к началу flex-контейнера, элемент после — к концу.
<template>
  <v-row>
    <v-btn>Левая</v-btn>
    <v-spacer></v-spacer>
    <v-btn>Центр</v-btn>
    <v-spacer></v-spacer>
    <v-btn>Правая</v-btn>
  </v-row>
</template>

В этом случае три кнопки выравниваются с равными промежутками, так как два спейсера делят свободное пространство поровну.

Интеграция с v-toolbar и v-app-bar

В компонентах верхнего уровня, таких как v-toolbar и v-app-bar, v-spacer широко применяется для создания адаптивного интерфейса.

<template>
  <v-app-bar>
    <v-toolbar-title>Название приложения</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon>
      <v-icon>mdi-bell</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-account</v-icon>
    </v-btn>
  </v-app-bar>
</template>

v-spacer вытесняет кнопки с иконками к правому краю, оставляя заголовок прижатым к левому краю. Это позволяет легко создавать макеты с элементами, распределёнными по горизонтали.

Использование с v-container, v-row и v-col

В сочетании с сеткой v-container, v-row и v-col v-spacer обеспечивает гибкую расстановку элементов без добавления сложных классов с отступами.

<template>
  <v-container>
    <v-row align="center">
      <v-col cols="auto">
        <v-btn>Меню</v-btn>
      </v-col>
      <v-spacer></v-spacer>
      <v-col cols="auto">
        <v-btn>Настройки</v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

Здесь спейсер автоматически растягивается на всё свободное пространство между колонками, обеспечивая выравнивание элементов по противоположным сторонам ряда.

Совмещение с другими flex-свойствами

v-spacer полностью совместим с другими свойствами flex, такими как justify-content и align-items.

  • justify-content: center при наличии v-spacer создаёт равные отступы вокруг спейсера.
  • align-items: stretch не влияет на ширину v-spacer, так как его основная роль — горизонтальное распределение пространства.
<template>
  <v-row align="center" justify="space-between">
    <v-btn>Левый</v-btn>
    <v-spacer></v-spacer>
    <v-btn>Правый</v-btn>
  </v-row>
</template>

Даже при изменении размера окна элементы сохраняют своё положение, а спейсер динамически корректирует ширину.

Особенности и ограничения

  • v-spacer не имеет визуальных стилей и не влияет на высоту контейнера.
  • Используется исключительно в горизонтальном распределении, вертикальное применение требует отдельной настройки flex-контейнера (flex-direction: column).
  • Несколько v-spacer внутри одного контейнера делят пространство пропорционально, что позволяет создавать сложные схемы выравнивания без использования CSS.

Примеры сложного применения

Гибкая навигационная панель с несколькими блоками

<template>
  <v-toolbar>
    <v-btn>Главная</v-btn>
    <v-btn>О нас</v-btn>
    <v-spacer></v-spacer>
    <v-btn>Вход</v-btn>
    <v-btn>Регистрация</v-btn>
  </v-toolbar>
</template>

Здесь спейсер отделяет основные ссылки от блока авторизации, автоматически адаптируя макет под ширину окна.

Вертикальное распределение элементов с колонками

<template>
  <v-row>
    <v-col>
      <v-btn>Верх</v-btn>
    </v-col>
    <v-spacer></v-spacer>
    <v-col>
      <v-btn>Низ</v-btn>
    </v-col>
  </v-row>
</template>

Для вертикального использования необходимо задать v-row свойство class="flex-column" или использовать v-col с flex-настройками.

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

Оглавление