Структура темы

Vuetify — это компонентная библиотека для Vue.js, которая предоставляет готовые элементы интерфейса с продуманной системой сеток, стилями и интерактивными элементами. В основе структуры приложения на Vuetify лежит компонентный подход, где каждая часть интерфейса реализуется как отдельный компонент.

Компоненты и их иерархия

  • v-app — корневой компонент, который оборачивает всё приложение. Он обеспечивает базовую стилизацию и поддержку тем.
  • v-main — основной контейнер для контента. Обычно располагается внутри v-app и содержит всю визуальную часть приложения.
  • v-container — блок, который управляет отступами и шириной контента. Поддерживает адаптивное поведение через свойства fluid, grid-list-md, grid-list-lg.
  • v-row и v-col — элементы сетки, которые формируют ряды и колонки. Используются для построения адаптивного дизайна. v-col принимает параметры cols, offset, order для управления расположением.
  • v-sheet — универсальный контейнер с фоновыми стилями и тенями. Может использоваться для обертки отдельных блоков интерфейса.

Темизация и стили

Vuetify поддерживает темы через объект theme в конфигурации. Можно определить светлую и тёмную темы, а также кастомные цвета для компонентов:

import { createVuetify } from 'vuetify'

const vuetify = createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
        },
      },
      dark: {
        colors: {
          primary: '#2196F3',
          secondary: '#FF5722',
        },
      },
    },
  },
})

Работа с навигацией

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

  • v-app-bar — верхняя панель приложения. Содержит логотип, кнопки меню, действия пользователя.
  • v-navigation-drawer — боковая панель, которая может быть скрыта или зафиксирована. Используется для меню и фильтров.
  • v-footer — нижняя часть страницы с информацией о копирайтах, ссылках или дополнительной навигацией.

Эти компоненты можно комбинировать для построения типичной структуры приложения: v-app → v-navigation-drawer + v-app-bar → v-main → контент.

Формы и взаимодействие с пользователем

Vuetify предоставляет широкий набор компонентов для форм:

  • v-text-field — текстовое поле с поддержкой масок, валидации и иконок.
  • v-select — выпадающий список с возможностью множественного выбора.
  • v-checkbox и v-radio-group — элементы для выбора опций.
  • v-switch — переключатель состояния.
  • v-form — контейнер для формы, который позволяет объединять валидацию нескольких полей.

Формы интегрируются с Vue через v-model, что обеспечивает реактивное обновление данных:

<v-form ref="form" v-model="valid">
  <v-text-field
    v-model="user.name"
    :rules="[v => !!v || 'Имя обязательно']"
    label="Имя"
  ></v-text-field>
  <v-btn :disabled="!valid">Отправить</v-btn>
</v-form>

Сетка и адаптивность

Система сетки Vuetify построена по принципу 12-колоночной сетки, аналогично Bootstrap:

  • v-container задает отступы и центровку.
  • v-row формирует ряд элементов.
  • v-col делит ряд на колонки. Параметры cols, sm, md, lg, xl позволяют управлять шириной на разных размерах экранов.

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

<v-row>
  <v-col cols="12" sm="6" md="4">
    <v-card>Контент 1</v-card>
  </v-col>
  <v-col cols="12" sm="6" md="4">
    <v-card>Контент 2</v-card>
  </v-col>
  <v-col cols="12" sm="12" md="4">
    <v-card>Контент 3</v-card>
  </v-col>
</v-row>

Работа с интерактивными элементами

Vuetify предоставляет компоненты для взаимодействия:

  • v-btn — кнопки с различными стилями, цветами и иконками.
  • v-icon — иконки Material Design, которые можно использовать в кнопках и списках.
  • v-dialog, v-menu, v-tooltip, v-snackbar — модальные окна, контекстные меню, всплывающие подсказки и уведомления.
  • v-progress-linear и v-progress-circular — индикаторы загрузки.

Использование слотов и scoped slots

Vuetify активно использует слоты для кастомизации компонентов:

  • default slot — основной контент компонента.
  • prepend / append — вставка элементов перед или после основного содержимого.
  • scoped slots — позволяют передавать данные из компонента внутрь слота для динамической генерации интерфейса.

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

<v-list>
  <v-list-item v-for="item in items" :key="item.id">
    <template #default="{ active }">
      <v-list-item-content>
        <v-list-item-title :class="{ 'font-weight-bold': active }">{{ item.name }}</v-list-item-title>
      </v-list-item-content>
    </template>
  </v-list-item>
</v-list>

Оптимизация структуры

  • Разделение приложения на модули и страницы с использованием компонентов повышает читаемость и поддерживаемость.
  • Вложенные компоненты упрощают повторное использование элементов интерфейса.
  • Использование v-container → v-row → v-col обеспечивает единый подход к построению адаптивной сетки.

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

Оглавление