v-ripple эффект волны

Эффект волны (ripple) является важным элементом интерфейса, создавая визуальную обратную связь при взаимодействии пользователя с элементами. В Quasar библиотеке этот эффект реализуется через директиву v-ripple, которая может применяться к любому интерактивному элементу: кнопкам, карточкам, спискам и другим компонентам.

Простейший синтаксис:

<q-btn label="Нажми меня" v-ripple />

В данном примере при клике на кнопку появляется волна, расходящаяся от точки касания.

Настройка поведения волны

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

<q-btn
  label="Кастомная волна"
  v-ripple="{ color: 'red', opacity: 0.3, center: true }"
/>

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

  • color — задаёт цвет волны. Может использоваться стандартное название цвета (red, blue) или HEX/RGB.
  • opacity — прозрачность эффекта, значения от 0 до 1.
  • center — если true, волна расходится от центра элемента, а не от точки клика.
  • duration — длительность анимации в миллисекундах.
  • class — добавление кастомного CSS-класса для дополнительного стилизования.

Пример с длительностью и классом:

<q-card v-ripple="{ color: 'blue', duration: 600, class: 'my-ripple' }">
  Контент карточки
</q-card>

Управление активацией эффекта

Эффект волны может быть включен или отключен динамически:

<q-btn
  label="Вкл/Выкл Ripple"
  :v-ripple="isRippleActive"
  @click="isRippleActive = !isRippleActive"
/>

Здесь переменная isRippleActive управляет наличием эффекта. Если false, волна не появляется.

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

  • Кнопки (q-btn): v-ripple встроен по умолчанию, но его поведение можно переопределить.
  • Карточки (q-card): директива позволяет создавать интерактивные элементы, которые визуально реагируют на клик.
  • Списки (q-item): можно добавить ripple для всех элементов списка или отдельных элементов.

Пример списка с ripple:

<q-list>
  <q-item v-for="item in items" :key="item.id" v-ripple>
    {{ item.label }}
  </q-item>
</q-list>

Пользовательские стили и темы

Quasar позволяет легко адаптировать v-ripple под тему приложения. С помощью CSS можно менять цвет и форму эффекта:

.my-ripple {
  border-radius: 50%;
  background-color: rgba(255, 0, 0, 0.4);
}

В сочетании с параметром class директивы:

<q-btn label="Красная волна" v-ripple="{ class: 'my-ripple' }" />

Особенности и производительность

  • Ripple является аппаратно ускоренной анимацией, что обеспечивает плавность даже на мобильных устройствах.
  • При большом количестве одновременно анимируемых элементов следует учитывать нагрузку на DOM и GPU.
  • Ripple можно полностью отключить для всех компонентов глобально через конфигурацию Quasar, что полезно для минималистичных интерфейсов:
// quasar.conf.js
framework: {
  config: {
    ripple: false
  }
}

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

При рендеринге компонентов через v-for важно добавлять :key, чтобы v-ripple корректно применялся к каждому элементу. Также эффект корректно работает при добавлении и удалении элементов на лету.

Пример:

<q-list>
  <q-item v-for="user in users" :key="user.id" v-ripple>
    {{ user.name }}
  </q-item>
</q-list>

Эффект волны автоматически подстраивается под размеры и положение каждого элемента списка.

Советы по улучшению UX

  • Использовать center: true для элементов, где важно подчеркнуть сам элемент, а не точку клика.
  • Подбирать цвет и прозрачность так, чтобы волна была заметна на фоне элемента, но не отвлекала.
  • В мобильных приложениях использовать короткую длительность (duration: 300) для более отзывчивого интерфейса.

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

Оглавление