https://github.com/andrewvasilchuk/v-ripple-directive
🌊Vue.js directive for ripple effect.
https://github.com/andrewvasilchuk/v-ripple-directive
Last synced: 5 months ago
JSON representation
🌊Vue.js directive for ripple effect.
- Host: GitHub
- URL: https://github.com/andrewvasilchuk/v-ripple-directive
- Owner: andrewvasilchuk
- License: mit
- Created: 2019-09-10T19:31:59.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T09:48:27.000Z (almost 3 years ago)
- Last Synced: 2024-05-21T06:19:05.339Z (over 1 year ago)
- Language: JavaScript
- Size: 775 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - v-ripple-directive - Vue.js directive for ripple effect. ` 📝 2 years ago` (UI Utilities [🔝](#readme))
- awesome-vue - v-ripple-directive - Vue.js directive for ripple effect. (Components & Libraries / UI Utilities)
README
# 🌊 v-ripple-directive
> Vue.js directive for ripple effect.
## ✨ Features
- lightweight (`~964b` gzip).
- fully customizable during runtime/build.
- build upon [CSS Custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).
## Demo
[](https://codesandbox.io/s/vue-template-dsuuw?fontsize=14)
## 💿 Installation
### 📦 Via NPM
```bash
npm install v-ripple-directive --save
```
### 🧶 Via Yarn
```bash
yarn add v-ripple-directive
```
### 🖥️ Directly in browser
```html
Vue.use(VRipple)
```
> ⚠️ Don't forget to include `script` with Vue.js before installing the plugin.
## Initialization
### 🎨 Styles
To make everything work you should import core styles.
The idea behind is that you can override default styles during build process.
Example of using `SASS`/`SCSS`:
```scss
@import 'v-ripple-directive/src/index.scss';
```
Available `SASS` variables, that you can override during build process:
```scss
$v-ripple-color: #fff !default;
$v-ripple-duration: 2s !default;
$v-ripple-opacity: 0.32 !default;
$v-ripple-scale-start: 0.32 !default;
$v-ripple-scale-end: 24 !default;
```
Example of overriding:
```scss
...
$v-ripple-color: purple;
@import 'v-ripple-directive/src/index.scss';
...
```
**Note**: library is build upon [CSS Custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), so you can easily override styles during runtime.
Available `CSS` custom properties, that you can override during runtime:
```css
:root {
--v-ripple-color: #fff;
--v-ripple-duration: 2s;
--v-ripple-opacity: 0.32;
--v-ripple-scale-start: 0.32;
--v-ripple-scale-end: 24;
}
```
Example of override:
```css
/* globally */
:root {
--v-ripple-color: tomato;
}
/* just for single element */
.foo {
--v-ripple-color: lime;
}
```
Move on to `JS`.
### As a plugin
It must be called before `new Vue()`.
```javascript
import Vue from 'vue'
import VRipple from 'v-ripple-directive'
Vue.use(VRipple)
```
### As a global directive
```javascript
import Vue from 'vue'
import { directive } from 'v-ripple-directive'
Vue.directive('ripple', directive)
```
### As a local directive
```javascript
import { directive } from 'v-ripple-directive'
export default {
name: 'YourAwesomeComponent',
directives: {
ripple: directive,
},
}
```
## 🚀 Usage
```html
```
## ⚙️ Directive value
If you pass a value, it always should be an object that contains one of these properties:
| Property | Description |
| ------------- | ----------------------------------------------------------------------------- |
| `event` | Name of event to trigger ripple animation |
| `color` | Color of the ripple (any `CSS` valid `color`) |
| `duration` | Duration of the ripple animation (any `CSS` valid `animation-duration` value) |
| `opacity` | Opacity of the ripple (any CSS valid `opacity` value) |
| `scale-start` | Initial scale of the ripple (any CSS valid `transform: scale()` value) |
| `scale-end` | Ultimate scale of the ripple (any CSS valid `transform: scale()` value) |
## Powered by
- `Rollup` (and plugins)
- `SASS` and `node-sass`
- `PostCSS`
- `Autoprefixer`
## 🔒 License
[MIT](http://opensource.org/licenses/MIT)