# vue-useripple

> vue use ripple

Latest version **1.1.5** (published 2017-09-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-useripple
pnpm add vue-useripple
yarn add vue-useripple
bun add vue-useripple
```

## 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 | 1.1.5 |
| Published | 2017-09-01 |
| First published | 2017-09-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | LDQ-first |
| Maintainers | ldq-first |
| Keywords | vue, ripple, material, button, plugin |

## Links

- npm: https://www.npmjs.com/package/vue-useripple
- Repository: https://github.com/LDQ-first/vue-useripple
- Homepage: https://github.com/LDQ-first/vue-useripple#readme
- Issues: https://github.com/LDQ-first/vue-useripple/issues
- npm.io page: https://npm.io/package/vue-useripple

## Recent versions

- 1.1.5 (latest) — 2017-09-01
- 1.1.4 — 2017-09-01
- 1.1.3 — 2017-09-01
- 1.1.2 — 2017-09-01
- 1.1.1 — 2017-09-01
- 1.1.0 — 2017-09-01
- 1.0.9 — 2017-09-01
- 1.0.8 — 2017-09-01
- 1.0.7 — 2017-09-01
- 1.0.6 — 2017-09-01
- 1.0.5 — 2017-09-01
- 1.0.4 — 2017-09-01
- 1.0.3 — 2017-09-01
- 1.0.2 — 2017-09-01
- 1.0.1 — 2017-09-01
- … 1 more at https://npm.io/package/vue-useripple/versions

## README

# vue-useripple

> A ripple plugin of Vue.js

[Demo](https://ldq-first.github.io/vue-ripple-plugin/dist/#/)

[more detail of use](https://github.com/LDQ-first/vue-ripple-plugin/tree/master/src/views/show.vue)

## Use
``` javascript
/*-- npm --*/
npm install --save vue-useripple

```

``` javascript
/*-- main.js --*/
import Vue from 'vue'
import VueRipple from 'vue-useripple'
Vue.use(VueRipple)
```

``` 
/*-- vue --*/
/*-- Fisrt --*/
<template>
    <div>
        <ripple :isInline="isInline">
            <button slot="pure" @click="clickEvent">button</button>
        </ripple>
    </div>
</template>
```

```
/*-- vue --*/
/*-- Second --*/
<template>
    <div>
        <ripple children="one">
            <div slot="children" >
                <button @click="clickEvent">button</button>
            </div>
        </ripple>
    </div>
</template>
```

```
/*-- vue --*/
/*-- Third --*/
<template>
    <div>
       <ripple children="one">
            <div slot="children" class="children">
                <footer>
                    <ripple  :isInline="isInline">
                        <button slot="pure"  @click="clickEvent">showModal</button>
                    </ripple>
                </footer>
            </div>
        </ripple>
    </div>
</template>
```

```
/*-- vue --*/
/*-- Fourth --*/
<template>
    <div>
        <ripple :isInline="isInline" speed="2">
            <button slot="pure">speed</button>
        </ripple>
        <ripple :isInline="isInline" bg="#2B72D6">
            <button slot="pure">background</button>
        </ripple>
        <ripple :isInline="isInline" :br="br">
            <button slot="pure">borderRadius</button>
        </ripple>
    </div>
</template>
```

## param


``` javascript
/*
    make ripple become inline-block
*/
isInline: {       
    type: Boolean,
    required: false
},
/*
    set speed of ripple 
*/
speed: {
    type: String,
    required: false
},
/*
    set background of ripple 
*/
bg: {
    type: String,
    required: false
},
/*
    change ripple to circle
*/
br: {
    type: Boolean,
    required: false   
},
/*
    raise z-index of child element  
*/
children: {
    type: String,
    required: false
}
```

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