1. SmartAdmin
  2. Core Plugins
  3. waves

Waves EXTENSION waves 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();
    ... 
}