web
mobile
Edit these docs Rate these docs

Angular Bootstrap Waves effect

Angular waves effect - Bootstrap 4 & Material Design

Vue Bootstrap waves effect is an impression of circular overlay movement, triggered by clicking the object, flowing from the center of the click. By default, waves are added and active on elements such as buttons and navbar's links, on some they wait for waves prop, as is the case with masks. Ultimately, it is failrly easy to add them onto any custom component -- see how you may attach it in the API section


Example


        <!--Button with wave-->
        <a mdbBtn color="primary" size="lg" mdbWavesEffect>Click me</a>

        <!--Mask with wave-->
        <div class="view overlay">
          <img
            src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(54).jpg"
            class="img-fluid"
            alt="Sample image with waves effect."
          />
          <a href="#">
            <div
              class="mask waves-effect waves-light rgba-white-slight"
              mdbWavesEffect
            ></div>
          </a>
        </div>
      

Customization

There are available two types of different waves: .waves-effect and .waves-light.


        <!--For a regular waves-->
        <a mdbBtn color="primary" size="lg" mdbWavesEffect>Regular waves</a>

        <!--For a lighter version of waves-->
        <a mdbBtn color="primary" size="lg" class="waves-light" mdbWavesEffect
          >Light waves</a
        >
      
Edit these docs Rate these docs

Angular Waves Effect - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of Angular Waves Effect directive.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// MDB Angular Pro
import { WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { WavesModule, ButtonsModule } from 'angular-bootstrap-md'