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

Package Sidebar

Install

npm i wave-effect

Weekly Downloads

5

Version

1.0.0

License

MIT

Unpacked Size

12.8 kB

Total Files

12

Last publish

Collaborators

  • zhangyu1995