Get a Material Ripple Effect to your components

Vue Kanban

Implementing a Material Ripple Effect style is now as easy as it gets, simply using the Vue Ripple Directive. This directive was created to be applicable to any element you would like to achieve such an effect.

Watch the ripple effect utilizing the directive in the following demo.

Follow a simple example below to see the ripple effect in a Vue.js project.

Example

Installation

Add the ripple directive to your Vue project with yarn

yarn add vue-ripple-directive

Usage

Register a global custom directive

import Ripple from 'vue-ripple-directive'

Vue.directive('ripple', Ripple)

Then you can use the directive in your project's template on any element

<div v-ripple>Ripple button</div>

or you can use it in multiple elements, and add modifiers and colors

<div v-ripple class="btn-block btn-lg  btn-primary">Ripple button</div>
<!-- the kanban component is for demonstrating purposes -->
<kanban-board :stages="stages" :blocks="blocks">
<div 
    v-for="block in blocks" 
    :slot="block.id" 
    v-ripple.mouseover="'red"
    >
    <div>
        id: {{ block.id }}
    </div>
    <div>
        {{ block.title }}
    </div>
</div>
</kanban-board>

The directive can be used with modifiers as seen above. If you want a custom color just pass a color parameter as a string. It's best if you use RGBA colors to achieve a greater effect.

This includes also the Kanban board layout component

Find more about this project on its GitHub repository.