Nybble Processing Mainframe

    wave-effect
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    wave-effect

    click wave effect with CSS animation.

    Install

    npm install wave-effect
    yarn add wave-effect

    Usage

    import wave,{ clearEffect } from 'wave-effect'
    import 'wave-effect/dist/wave.css'
    
    const button = document.getElementById("button")
    
    wave(button)
    
    // clear effect
    clearEffect(button)

    API

    wave(element: Element, options?: WaveOptions)

    WaveOptions

    interface WaveOptions {
      // current wave effect color
      waveColor?: string 
      // if element includes these className, click doesn't trigger effect
      disabledClass?: string[] 
    }

    Customize Style

    you can override less variables to customize style.

    @import "~wave-effect/src/wave.less";
    
    @wave-color: red;
    @wave-animation-width: 20px;

    or use css variables.

    :root {
      --wave-shadow-color: red;
      --wave-animation-width: 20px;
    }

    Licence

    MIT

    Install

    npm i wave-effect

    DownloadsWeekly Downloads

    6

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    12.8 kB

    Total Files

    12

    Last publish

    Collaborators

    • zhangyu1995