Оверлеи v-overlay

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

<v-overlay :value="true">
  <v-card class="pa-4">
    Содержимое оверлея
  </v-card>
</v-overlay>

Здесь ключевой проп — value. Когда он равен true, оверлей отображается, при false — скрыт.

Управление видимостью

v-overlay поддерживает реактивное управление через v-model или проп value. Это позволяет динамически показывать или скрывать оверлей при взаимодействии с другими компонентами:

<v-btn @click="showOverlay = !showOverlay">Переключить оверлей</v-btn>
<v-overlay v-model="showOverlay">
  <v-card class="pa-4">Содержимое</v-card>
</v-overlay>
  • v-model синхронизирует состояние отображения.
  • Можно использовать методы Vue для автоматического закрытия через таймер.

Настройка внешнего вида

Цвет и прозрачность оверлея регулируются через пропы color и opacity:

<v-overlay :value="true" color="blue" opacity="0.6">
  <v-card class="pa-4">Синее затемнение с прозрачностью 0.6</v-card>
</v-overlay>
  • color принимает любые допустимые цвета Vuetify или CSS.
  • opacity задаёт прозрачность слоя от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

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

Проп absolute позволяет разместить оверлей относительно ближайшего родительского элемента с position: relative. Это важно для модальных окон внутри конкретного блока, а не на всю страницу.

<div class="relative">
  <v-overlay absolute :value="showOverlay" color="black" opacity="0.5">
    <v-card class="pa-4">Местный оверлей</v-card>
  </v-overlay>
  <v-btn @click="showOverlay = !showOverlay">Показать оверлей</v-btn>
</div>

z-index регулируется через одноимённый проп, позволяя управлять уровнем перекрытия других элементов.

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

v-overlay поддерживает несколько слотов:

  • default — основное содержимое оверлея.
  • activator — элемент, который вызывает оверлей, часто используется для тултипов или всплывающих меню.

Пример с кастомным активатором:

<v-overlay v-model="showOverlay">
  <template #activator="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on">Открыть оверлей</v-btn>
  </template>
  <v-card class="pa-4">Содержимое оверлея</v-card>
</v-overlay>
  • attrs и on обеспечивают правильное связывание событий и атрибутов с активатором.

Анимации и переходы

Vuetify интегрирует анимации через стандартные переходы Vue. Проп transition позволяет выбрать встроенную анимацию:

<v-overlay v-model="showOverlay" transition="fade-transition">
  <v-card class="pa-4">Плавное появление и скрытие</v-card>
</v-overlay>
  • Можно использовать предустановленные переходы: fade-transition, scale-transition, slide-x-transition и другие.
  • Для собственных эффектов можно подключать кастомные CSS-классы через class и style.

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

Частое применение v-overlay — затемнение экрана с индикатором активности:

<v-overlay :value="loading">
  <v-progress-circular indeterminate size="64" color="white"></v-progress-circular>
</v-overlay>
  • Слой блокирует взаимодействие с контентом под ним.
  • v-progress-circular показывает бесконечную анимацию загрузки.

Комбинация с модальными окнами и карточками

v-overlay часто используется для создания полноэкранных или локальных модальных окон:

<v-overlay v-model="showModal" opacity="0.8" color="grey darken-4">
  <v-card class="pa-6 mx-auto" max-width="400">
    <v-card-title>Заголовок модалки</v-card-title>
    <v-card-text>Содержимое модального окна.</v-card-text>
    <v-card-actions>
      <v-btn color="primary" @click="showModal = false">Закрыть</v-btn>
    </v-card-actions>
  </v-card>
</v-overlay>
  • Настройка max-width и mx-auto позволяет центрировать окно на странице.
  • Использование v-card внутри оверлея обеспечивает единый стиль с остальными компонентами Vuetify.

Доступность

v-overlay поддерживает управление фокусом, чтобы обеспечить корректное взаимодействие с клавиатурой и экранными читалками. Для этого:

  • Используются стандартные элементы управления внутри оверлея.
  • Можно вручную управлять tabindex и aria-* атрибутами на активном содержимом.

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

  1. Использовать v-overlay для временных слоёв, а не постоянного UI.
  2. Обязательно контролировать value или v-model, чтобы избежать блокировки интерфейса.
  3. Для многослойных оверлеев регулировать z-index.
  4. Для локальных оверлеев использовать absolute и контейнер с position: relative.
  5. Анимации делают появление оверлея плавным, повышая UX.

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

Оглавление