vue-ripple
Компонент для создания ripple эффекта при клике.
Вы можете посмотреть на живой пример.
Установка
npm i @vkdesktop/vue-ripple
Особенности
- Анимация не затрагивает контент, а заливается под ним.
- Работает лучше, чем другие варианты на Vue.
- Можно менять скорость анимации через css.
- На компонент можно вешать события, чтобы не использовать лишний блок.
Использование
// Тег script в компоненте
import Ripple from '@vkdesktop/vue-ripple';
export default {
components: {
Ripple
},
// ...
}
<!-- Тег template в компоненте -->
<Ripple>
<div class="rippled-button">Кнопка с ripple эффектом</div>
</Ripple>
Параметры
Название | Описание | Тип | По умолчанию |
---|---|---|---|
color | Цвет эффекта | String | rgba(255, 255, 255, .3) |