Ripple

Ripple is an optional animation directive for the supported components such as MButtons. It is enabled by default and can to be disabled at your app's entry file (e.g. main.js) during the setup.

Basic

Ripple can be used on any element, which has its css position set. For example relative

Default ripple

<template>
	<div v-ripple style="position:relative;">Default ripple</div>
</template>

Custom

Ripple color & duration can configured manually per use.

Default ripple

Light-green ripple

One second ripple

One second orange red ripple

<template>
	<div v-ripple style="position:relative;">Default ripple</div>
	<div v-ripple="{ color: 'lightgreen' }" style="position:relative;">Light-green ripple</div>
	<div v-ripple="{ duration: '1s' }" style="position:relative;">One second ripple</div>
	<div v-ripple="{ color: 'orangered', duration: '1s' }" style="position:relative;">One second orange red ripple</div>
</template>