v-ripple

Директива v-ripple предназначена для добавления визуального эффекта “всплеска” (ripple) при взаимодействии пользователя с элементами интерфейса. Она имитирует распространение волны от точки нажатия и часто используется на кнопках, карточках, списках и других интерактивных компонентах, повышая отзывчивость интерфейса и визуальную обратную связь.

Подключение и базовое использование

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

<template>
  <div v-ripple class="custom-button">
    Нажми меня
  </div>
</template>

<style>
.custom-button {
  padding: 16px 32px;
  background-color: #1976d2;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  user-select: none;
  text-align: center;
}
</style>

При клике на блок появится эффект волны, исходящей из точки нажатия.

Настройка директивы

Директива v-ripple поддерживает объект конфигурации, позволяющий управлять поведением эффекта:

<div v-ripple="{ class: 'my-ripple', center: true, circle: true }">
  Центрированный круглый ripple
</div>

Основные параметры:

  • class – CSS-класс для кастомного оформления волны.
  • center – если true, волна начинается из центра элемента, а не из точки клика.
  • circle – применяет эффект круговой формы, удобен для круглых кнопок или иконок.
  • color – позволяет задать цвет волны через CSS-переменную --v-ripple-color или через собственный класс.

Применение на компонентах Vuetify

Многие компоненты Vuetify уже имеют встроенный ripple-эффект. Например:

<v-btn color="primary" v-ripple>
  Кнопка с ripple
</v-btn>

<v-card v-ripple>
  <v-card-title>Карточка с ripple</v-card-title>
</v-card>

<v-list-item v-ripple>
  Элемент списка с эффектом
</v-list-item>

Для кнопок, карточек и списков директива активируется автоматически, но её можно отключить через атрибут ripple="false":

<v-btn color="secondary" :ripple="false">
  Без ripple
</v-btn>

Динамическая активация и отключение

Директива поддерживает динамическое управление через булевое значение:

<div :v-ripple="isRippleEnabled ? {} : false">
  Динамический ripple
</div>
  • Если значение объекта, эффект активен.
  • Если значение false, эффект отключается.
  • Можно использовать реактивное состояние для включения/отключения ripple в зависимости от условий.

Пользовательский CSS для ripple

Для глубокого контроля можно создавать собственные стили через параметр class или переопределяя стандартные CSS-переменные:

.my-ripple {
  --v-ripple-color: rgba(255, 0, 0, 0.3);
  --v-ripple-duration: 800ms;
}
  • --v-ripple-color – цвет волны.
  • --v-ripple-duration – длительность анимации.
  • --v-ripple-scale – масштаб расширения волны.

Пример применения:

<div v-ripple="{ class: 'my-ripple', center: true }">
  Красный ripple
</div>

Использование ripple с кастомными событиями

Директива позволяет интегрировать эффект с собственными обработчиками событий:

<div
  v-ripple
  @mousedown="handleMouseDown"
  @mouseup="handleMouseUp"
>
  Элемент с ripple и кастомными событиями
</div>

<script>
export default {
  methods: {
    handleMouseDown() {
      console.log('Нажатие зафиксировано');
    },
    handleMouseUp() {
      console.log('Отпускание кнопки');
    }
  }
}
</script>

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

Ограничения и рекомендации

  • Для сложных элементов с множественными вложенными интерактивными зонами рекомендуется использовать v-ripple только на корневом элементе.
  • Для очень крупных элементов стоит контролировать длительность анимации через CSS, чтобы эффект оставался плавным.
  • При кастомизации через circle и center следует учитывать размеры элемента, чтобы волна не выходила за границы или не была слишком маленькой.

Расширенное использование: программный вызов

Vuetify позволяет управлять ripple через API программно, например, используя this.$vuetify.ripple для вызова эффекта вручную на любом элементе:

<template>
  <div ref="rippleTarget" class="ripple-box">
    Ripple вручную
  </div>
  <v-btn @click="triggerRipple">Запустить эффект</v-btn>
</template>

<script>
export default {
  methods: {
    triggerRipple() {
      this.$vuetify.ripple.show(this.$refs.rippleTarget, {
        event: { x: 50, y: 50 }, // координаты для начала ripple
        center: true,
      });
    }
  }
}
</script>

<style>
.ripple-box {
  width: 200px;
  height: 100px;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

Такой подход позволяет запускать эффект независимо от стандартных событий клика.

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

Оглавление