使用Vue指令的Material波纹效果 – vue-ripple-directive

Material Ripple Effect

使用Vue指令的Material波纹效果

This directive it’s meant to be used in any element in which you like to achieve such ripple effect.

Installation

npm install vue-ripple-directive --save

Options

Optional parameter to pass to the directive.

Parameter Type Values
color-value String Default: ‘rgba(0, 0, 0, 0.35)’ .
Accepts either HEX, RGB & RGBA values. For optimal look use RGBA with low opacity.

Modifiers

By default this directive attaches a click handler to the element as well as the transition is set for 600ms. For those who wants to modify the same, just pass modifiers to the directive:

v-ripple.mouseover.500

Can also modify only one

v-ripple.mouseover

Sample & Usage

First you need to import the directive and add it to Vue.

import Ripple from 'vue-ripple-directive'

Vue.directive('ripple', Ripple);

Then use on any element you want to achieve the effect.

<div v-ripple class="button is-primary">This is a button</div>

If you want a custom color just pass a color parameter asstring. It’s best if you use RGBA colors to achieve a greater effect.

<div v-ripple="'rgba(255, 255, 255, 0.35)'"  class="button">I have different color</div>

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:使用Vue指令的Material波纹效果 – vue-ripple-directive