Elevation helpers

В Vuetify elevation helpers используются для управления визуальной глубиной компонентов через тени, имитирующие физическое расположение элементов на плоскости. Они реализованы с помощью классов elevation-{уровень}, где уровень варьируется от 0 до 24. Каждый уровень соответствует определённой интенсивности тени.

Синтаксис и применение

Базовый синтаксис выглядит так:

<div class="elevation-5">
  Контент с тенью уровня 5
</div>
  • elevation-0 — отсутствие тени, полностью плоский элемент.
  • elevation-1–24 — постепенное увеличение глубины и интенсивности тени.

Классы могут применяться к любым блочным элементам (div, v-card, v-toolbar), а также к компонентам Vuetify.

Принципы работы

Elevation в Vuetify основан на концепции Material Design, где тень передает ощущение физической высоты элемента над поверхностью. Основные особенности:

  • Чем выше уровень, тем длиннее и мягче тень.
  • Внешние компоненты (например, модальные окна или всплывающие панели) обычно используют более высокие уровни, чтобы выделиться.
  • Эффект визуально помогает пользователю воспринимать иерархию элементов на странице.

Интеграция с компонентами Vuetify

v-card с тенью

<v-card class="elevation-10" width="300">
  <v-card-title>Пример карточки</v-card-title>
  <v-card-text>
    Карточка с тенью уровня 10
  </v-card-text>
</v-card>
  • Здесь elevation-10 делает тень заметной, создавая ощущение объема.
  • Можно комбинировать с другими стилями (rounded, outlined) для более сложного дизайна.

v-btn с тенью

<v-btn class="elevation-3" color="primary">
  Кнопка с тенью
</v-btn>
  • Малый уровень тени придает кнопке легкость, не отвлекая внимания от других элементов.

Динамическое управление тенью

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

<v-card :elevation="cardElevation">
  <v-card-title>Динамическая тень</v-card-title>
</v-card>

<script>
export default {
  data() {
    return {
      cardElevation: 5
    };
  }
};
</script>
  • Изменяя cardElevation через события или логику приложения, можно создавать интерактивные эффекты наведения или акцентирования.

Комбинация с другими CSS-классами

  • rounded и elevation: закругленные элементы с тенью выглядят более мягко и современно.
  • outlined и elevation: тень становится менее заметной, так как контур подчеркивает границы.
  • Можно использовать responsive классы, чтобы изменять тень в зависимости от размера экрана, используя условные классы d-{breakpoint}-block и elevation-{уровень}.

Советы по использованию

  • Для небольших всплывающих элементов (tooltip, menu) лучше использовать elevation-2–4.
  • Основные элементы интерфейса (card, dialog) — elevation-8–16.
  • Максимальные значения (elevation-20–24) применяются для модальных окон, акцентированных панелей или элементов, требующих явного выделения.
  • Стараться не перегружать страницу высокими уровнями тени одновременно, чтобы избежать визуального шума.

Пользовательские модификации

Vuetify предоставляет возможность изменять стили тени через SASS-переменные, что позволяет подгонять интенсивность и цвет под дизайн проекта:

$material-light-elevation-1: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
  • Перенастройка этих переменных позволяет создавать уникальные тени, отличные от стандартных.

Взаимодействие с темами

  • При смене темы (light / dark) уровень тени можно корректировать, чтобы он гармонировал с фоном.
  • В темной теме интенсивность тени часто уменьшается, чтобы не создавать чрезмерного контраста.

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

<v-row>
  <v-col cols="4">
    <v-card class="elevation-1 pa-4">Уровень 1</v-card>
  </v-col>
  <v-col cols="4">
    <v-card class="elevation-6 pa-4">Уровень 6</v-card>
  </v-col>
  <v-col cols="4">
    <v-card class="elevation-12 pa-4">Уровень 12</v-card>
  </v-col>
</v-row>
  • Этот пример наглядно показывает различия в визуальном восприятии элементов с разной глубиной.
  • Использование сетки v-row и v-col помогает сравнить уровни тени в одном ряду.

Заключение по практике

Elevation helpers — один из ключевых инструментов Vuetify для создания визуальной иерархии. Правильное применение уровней тени повышает читаемость интерфейса, акцентирует важные элементы и улучшает взаимодействие пользователя с приложением.

Оглавление