Waves EXTENSIONwaves description
About
Waves is an external library that we've included in SmartAdmin to allow us to create the ink effect you notice on Google's Material Design concept. To put the waves effect on an element,you just add the class .js-waves-on
. Waves are automatically attached to all .btn
classes and nav elements,if you like to turn this feature off for any reason you can add .js-waves-off
Find in-depth,guidelines,tutorials and more on Waves's Official Documentation
Waves turned on manually
Below we use
.js-waves-on
class to add the waves effect to div element. You can do this for any element with a CSS style .d-block
or .d-flex
.Waves are on by default
Waves disable and auto attach
The waves function is automatically attached to all .btn classes and nav elements. You can disable this by adding
.js-waves-off
Waves are on by default
Waves are off using a class
Waves Config
Turn off via global config through app.config.js
rippleEffect: true, // material design effect that appears on all buttons
Script that turns on the plugin in app.core.js
if (window.Waves && myapp_config.rippleEffect) { Waves.attach('.nav-menu:not(.js-waves-off) a,.btn:not(.js-waves-off):not(.btn-switch),.js-waves-on', ['waves-themed']); Waves.init(); ... }