Vue.js directive for ripple effect
npm install v-ripple-directive> Vue.js directive for ripple effect.
- lightweight (~964b gzip).
- fully customizable during runtime/build.
- build upon CSS Custom properties.
``bash`
npm install v-ripple-directive --save
`bash`
yarn add v-ripple-directive
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, 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.
It must be called before new Vue().
`javascript
import Vue from 'vue'
import VRipple from 'v-ripple-directive'
Vue.use(VRipple)
`
`javascript
import Vue from 'vue'
import { directive } from 'v-ripple-directive'
Vue.directive('ripple', directive)
`
`javascript
import { directive } from 'v-ripple-directive'
export default {
name: 'YourAwesomeComponent',
directives: {
ripple: directive,
},
}
`
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) |
- Rollup (and plugins)SASS
- and node-sass
-
-