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

Компонент v-container является базовым строительным блоком сеточной системы Vuetify. Он служит для создания обёрток контента с поддержкой адаптивной разметки. Основная цель v-container — управлять шириной содержимого и обеспечивать корректное размещение элементов внутри сетки.

По умолчанию v-container поддерживает два режима ширины: fluid и фиксированный размер.

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

Свойства компонента v-container

v-container поддерживает несколько ключевых пропсов, влияющих на расположение и адаптивность:

  • fluid — делает контейнер растягивающимся на всю ширину экрана.
  • tag — позволяет менять HTML-тег контейнера, по умолчанию это <div>.
  • pa-# / ma-# — управляют внутренними (padding) и внешними (margin) отступами с помощью классов Vuetify.

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

<v-container pa-4>
  <v-row>
    <v-col>Контент с отступами</v-col>
  </v-row>
</v-container>

Сетка внутри v-container

v-container тесно интегрирован с компонентами v-row и v-col, формируя основу сеточной системы Vuetify.

v-row

  • Выравнивает колонки горизонтально.

  • Поддерживает свойства:

    • align — вертикальное выравнивание (start, center, end, stretch).
    • justify — горизонтальное распределение (start, center, end, space-between, space-around, space-evenly).
    • no-gutters — отключает стандартные отступы между колонками.

Пример горизонтального центрирования колонок:

<v-container>
  <v-row justify="center" align="center">
    <v-col cols="4">Колонка 1</v-col>
    <v-col cols="4">Колонка 2</v-col>
  </v-row>
</v-container>

v-col

  • Определяет ширину элемента в сетке.

  • Свойства:

    • cols — число колонок от 1 до 12.
    • sm/md/lg/xl — адаптивная ширина для разных размеров экрана.
    • offset — смещение колонки вправо.

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

<v-container>
  <v-row>
    <v-col cols="12" sm="6" md="4">Адаптивная колонка</v-col>
  </v-row>
</v-container>

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

v-container автоматически подстраивается под размеры экрана благодаря сетке Vuetify. Используются стандартные брейкпоинты:

  • xs — до 600px
  • sm — 600–960px
  • md — 960–1264px
  • lg — 1264–1904px
  • xl — свыше 1904px

Пример скрытия колонки на малых экранах:

<v-container>
  <v-row>
    <v-col cols="12" sm="6" md="4" class="d-none d-sm-block">Только для sm+</v-col>
  </v-row>
</v-container>

Стилизация и кастомизация

v-container можно комбинировать с утилитами Vuetify для быстрого изменения внешнего вида:

  • color — задаёт фоновый цвет.
  • class — добавление собственных CSS-классов.
  • style — инлайновые стили для точной настройки.

Пример с фоновым цветом и скруглениями:

<v-container class="rounded-lg" style="background-color: #f5f5f5;" pa-6>
  <v-row>
    <v-col>Стилизованный контейнер</v-col>
  </v-row>
</v-container>

Вложенные контейнеры

Можно использовать v-container внутри другого контейнера для сложной компоновки. Важно помнить, что вложенный контейнер по умолчанию наследует свойства родителя, но его ширина и паддинги можно изменять отдельно:

<v-container>
  <v-row>
    <v-col>
      <v-container fluid pa-2>
        Вложенный контейнер
      </v-container>
    </v-col>
  </v-row>
</v-container>

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

  • Использовать fluid, если макет должен занимать всю ширину экрана.
  • Комбинировать с v-row и v-col для точного управления колонками.
  • Применять классы Vuetify (pa-#, ma-#, d-flex) для гибкой настройки отступов и выравнивания.
  • Вложенные контейнеры полезны для разделения секций с разным стилем или шириной.

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

Оглавление