# vue-ripple-directive

> Vue Material Ripple Effect Directive

Latest version **2.0.1** (published 2017-11-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-ripple-directive
pnpm add vue-ripple-directive
yarn add vue-ripple-directive
bun add vue-ripple-directive
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2017-11-30 |
| First published | 2017-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 278 |
| Author | PygmySlowLoris Team |
| Maintainers | guidoec, edujugon |
| Keywords | vue, ripple, material, directive, ripple effect, button |

## Links

- npm: https://www.npmjs.com/package/vue-ripple-directive
- Repository: https://github.com/PygmySlowLoris/vue-ripple-directive
- Homepage: https://github.com/PygmySlowLoris/vue-ripple-directive#readme
- Issues: https://github.com/PygmySlowLoris/vue-ripple-directive/issues
- npm.io page: https://npm.io/package/vue-ripple-directive

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.2.1

## Recent versions

- 2.0.1 (latest) — 2017-11-30
- 2.0.1-beta (beta) — 2017-11-30
- 1.1.1 — 2017-11-26
- 1.1.0 — 2017-11-18
- 2.0.0-beta — 2017-10-04
- 2.0.0 — 2017-10-04
- 1.0.13 — 2017-09-09
- 1.0.12 — 2017-07-25
- 1.0.11 — 2017-07-24
- 1.0.10 — 2017-07-24
- 1.0.9 — 2017-07-12
- 1.0.8 — 2017-06-13
- 1.0.7 — 2017-05-24
- 1.0.6 — 2017-05-19
- 1.0.5 — 2017-05-15
- … 5 more at https://npm.io/package/vue-ripple-directive/versions

## README

#   Material Ripple Effect

Material Ripple Effect as Vue Directive.

<p align="center">
<img src="https://media.giphy.com/media/MfW6n0zLw2k7K/giphy.gif" />
</p>

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

<a href="https://pygmyslowloris.github.io/vue-ripple-directive/"> Live Demo</a>

##  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 the ripple since v2.0.* is `position: absolute`, to avoid trailing issues when elements with the directive in the UI move.

##  Options

Optional parameter to pass to the directive.

| Parameter      | Type      | Values     |
| :--------------- | :-------  | :--------- |
|  `color-value`      | String    |  <b>Default: 'rgba(0, 0, 0, 0.35)'</b>. <br> 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 as `string`. 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>
```

##  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);
```

---
_Source: https://npm.io/package/vue-ripple-directive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._