https://github.com/PygmySlowLoris/vue-ripple-directive

Material Ripple Effect as Vue Directive.
https://github.com/PygmySlowLoris/vue-ripple-directive

material-ripple ripple vue vue-directive

Last synced: 6 days ago
JSON representation

Material Ripple Effect as Vue Directive.

• Host: GitHub
• URL: https://github.com/PygmySlowLoris/vue-ripple-directive
• Owner: PygmySlowLoris
• License: mit
• Created: 2017-05-12T08:25:49.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-02-04T09:14:50.000Z (almost 4 years ago)
• Last Synced: 2024-10-26T14:43:54.131Z (13 days ago)
• Topics: material-ripple, ripple, vue, vue-directive
• Language: JavaScript
• Size: 1.07 MB
• Stars: 287
• Watchers: 2
• Forks: 51
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-ripple-directive - ripple-directive?style=social) - 使用Vue指令的Material波纹效果 (UI组件)
• awesome-material-design - vue-ripple-directive - Material Ripple built as a Vue Directive (Vue / Components)
• awesome-github-vue - vue-ripple-directive - 使用Vue指令的Material波纹效果 (UI组件)
• awesome-github-vue - vue-ripple-directive - 使用Vue指令的Material波纹效果 (UI组件)
• awesome - vue-ripple-directive - 使用Vue指令的Material波纹效果 (UI组件)

README

        
#   Material Ripple Effect

Material Ripple Effect as Vue Directive.







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

 Live Demo

##  Installation

```

npm install vue-ripple-directive --save

```

>### Important Notice

>The directive will work better if the element where you attach it is **relative positioned**. 

>Although the directive will try to set `position: relative` if the element does not have this property.

>This is because since v2.0.* the ripple directive changed its positioning method to avoid trailing issues when elements in the UI move, causing the ripple to stay in previous position and not in the one that element moved to.

##  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.

```

This is a button

```


If you want a custom color just pass a color parameter as `string`. It's best if you use RGBA colors to achieve a greater effect.

```

I have different color

```


##  Global settings

You can set the default color and z-index for all your ripples as the following example

```

import Ripple from 'vue-ripple-directive'

Ripple.color = 'rgba(255, 255, 255, 0.35)';

Ripple.zIndex = 55;

Vue.directive('ripple', Ripple);

```