v-ripple specification

[YerkoPalma]

v-ripple directive

v-ripple is the radial effect from material design when an object is clicked or taped. In this first version the goal is to have a simple but flexible effect aiming, in some future versions, to have a full featured radial transition effect, compatible with vue-router

General

It supposed to be used like this

<template>
  <div v-ripple></div>
</template>
<script>
export default {
  ripple: {
    // some options
  }
}
</script>

What's defined in the ripple option is applied globally wherever the directive is present in the current component/instance. All of those options can be overwritten for a specific element in the directive declaration. If the directive is applied to a vue component, it might be applied to the $el element of that component or discard silently.

Modifiers

• color: The color to be applied to the ripple. Predefined colors are

name	value
black (default)	#000000
red	#f44336
pink	#e91e63
purple	#9c27b0
indigo	#3f51b5
blue	#2196f3
cyan	#00bcd4
teal	#009688
green	#4caf50
lime	#cddc39
yellow	#ffeb3b
amber	#ffc107
orange	#ff9800
brown	#795548
grey	#9e9e9e
white	#ffffff

examples:

<div v-ripple.brown></div>
<div v-ripple.cyan></div>
<div v-ripple.indigo></div>

• size: Define the size of the ripple effect. Predefined values are: xlarge, large, small and xsmall
• speed: Define the speed of propagation of the wave. Predefined values are: slow and fast

  Options

• color<String>: Allow to define a custom color for ripples
• size<Number>: Allow to define a custom sizes for ripples
• speed<Number>: Allow to define seconds of duration of the ripple effect
• before<Function>: Define a global callback to be called before the effect is executed
• after<Function>: Define a global callback to be called after the effect is executed
• trigger<Object>: Allow to define the trigger event and target for the effect. It expect two properties
  • event<String>: The event that trigger the effect on the element. Default to 'click'
  • target<String>: The target for the trigger, this allow to have custom trigger events for different elements. Default to 'all', otherwise expect a css selector. For example, if you want the ripple effect on hover for the #login it should be specified like this:

ripple: {
  trigger: {
    target: '#login',
    event: 'hover'
  }
}

[YerkoPalma]

related https://github.com/YerkoPalma/palmacontabilidad/issues/6

[YerkoPalma]

Use css files instead of javascript to manipulate animations