Nostalgic Perogi Monogramming

    ng-ripple

    1.0.3 • Public • Published

    ng-ripple

    Material ripple effects directive for AngularJS, Inspired by Angular Material Design , this implementation contains the ripple animation for buttons and links

    Version

    1.0.2

    Dependencies

    • AngularJs

    You can also use jQuery version

    Installation

    NPM

    $ npm install ng-ripple

    or Bower

    $ bower install ngRipple

    Examples

    Various examples: https://ng-ripple.antoniodalsie.com/

    Options

    Create directive with Element:

    <ripple></ripple>

    or with Class:

    <a href="#" class="ripple"></ripple>

    or with Attibute:

    <a href="#" data-ripple></ripple>

    or

    <a href="#" ripple></ripple>

    Add material button with box-shadow:

    <ripple class="r-raised"></ripple>

    Icon element:

    <ripple class="r-icon"></ripple>

    Fab element:

    <ripple class="r-round r-raised"></ripple>

    Disabled ripple

    <ripple r-disabled></ripple>

    or Disabled active

    <ripple clas="r-int-disabled"></ripple>

    or Disabled all element:

    <ripple class="disabled"></ripple>

    Custom light color

    <ripple r-light></ripple>

    Custom ripple color

    <ripple r-color="#f00"></ripple>

    Custom ripple opacity

    <ripple r-opacity=".2"></ripple>

    Ripple in-front (overink)

    <ripple class="r-overink"></ripple>

    Prevent ink for specific element and children

    <ripple>
        <div class="r-noink">
            I hate ink
        </div>
        <div>
            I love ink
        </div>
    </ripple>

    Prevent ink with specific class

    <ripple>
        <div class="selected" r-prevent=".selected"></div>
    </ripple>

    Ripple on click (only child element)

    <ripple>
        <div class="r-noink-hover"></div>
    </ripple>

    Angular Options

        app.run(['rippleConfig', function(rippleConfig){
            rippleConfig.rippleOpacity = .2;
            rippleConfig.rippleDelay = 100;
            rippleConfig.mobileTouch = false; // False (default): Mobile use ONLY click || True: mobile use touchstart and touchend
        }]);

    Ripple Opacity (rippleOpacity):

    For all element

    Ripple Incremental (rippleDelay):

    This is the delay of exit animation of ink

    Changelog

    Version 1.0.2:

    Fix duplication ng-* directive

    Version 1.0.1:

    Fix and new options

    Version 1.0.0:

    Fix standalone, recreate ripple effects

    Version 0.9.6:

    Fix for Safari and Chrome 51 (Animation Bug)

    Version 0.9.5:

    Re-created animation of ink and general fix

    Version 0.9.4:

    Added r-overink for big element, added r-noink (prevent ink generation when you click a specific element)

    Version 0.9.3:

    Fix overflow ink problem

    Version 0.9.1:

    Fix disabled option.

    Version 0.9.0:

    Add standalone version.

    Version 0.5.1:

    Add Fab option.

    Install

    npm i ng-ripple

    DownloadsWeekly Downloads

    5

    Version

    1.0.3

    License

    ISC

    Last publish

    Collaborators

    • exodusanto