Coder Social home page Coder Social logo

manideepbollu / vue-ripple-directive Goto Github PK

View Code? Open in Web Editor NEW

This project forked from pygmyslowloris/vue-ripple-directive

0.0 2.0 0.0 1.03 MB

Material Ripple Effect as Vue Directive.

License: MIT License

HTML 2.61% CSS 4.71% JavaScript 92.68%

vue-ripple-directive's Introduction

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.

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

vue-ripple-directive's People

Contributors

edujugon avatar hazzo avatar mxbollu avatar viren-singh avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.