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
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
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:
v-ripple
directivev-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-routerGeneral
It supposed to be used like this
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#000000
#f44336
#e91e63
#9c27b0
#3f51b5
#2196f3
#00bcd4
#009688
#4caf50
#cddc39
#ffeb3b
#ffc107
#ff9800
#795548
#9e9e9e
#ffffff
examples:
size
: Define the size of the ripple effect. Predefined values are:xlarge
,large
,small
andxsmall
speed
: Define the speed of propagation of the wave. Predefined values are:slow
andfast
Options
color<String>
: Allow to define a custom color for ripplessize<Number>
: Allow to define a custom sizes for ripplesspeed<Number>
: Allow to define seconds of duration of the ripple effectbefore<Function>
: Define a global callback to be called before the effect is executedafter<Function>
: Define a global callback to be called after the effect is executedtrigger<Object>
: Allow to define the trigger event and target for the effect. It expect two propertiesevent<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: