Vue waves effect

Vue Bootstrap waves effect

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Click me
Sample image with waves effect. 
        
            
      <template>
        <section class="preview">
          <mdb-row>
            <mdb-col md="3">
              <mdb-btn color="primary">
                click me
              </mdb-btn>
            </mdb-col>
            <mdb-col md="5">
              <mdb-view src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(54).webp" hover>
                <mdb-mask overlay="white-slight" waves />
              </mdb-view>
            </mdb-col>
          </mdb-row>
        </section>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbRow,
          mdbCol,
          mdbBtn,
          mdbView,
          mdbMask
        } from 'mdbvue';
        export default {
          name: "WavesExample",
          componens: {
            mdbRow,
            mdbVol,
            mdbBtn,
            mdbView,
            mdbMask
          }
        }
      </script>
      
        
    
        
            
      <style>
        section.preview {
          border: 1px solid #e0e0e0;
          padding: 15px;
        }
      </style>

Vue Waves Effect - API

In this section you will find advanced information Waves Effect, including how the Waves Effect mixin works, how to use it in your custom components and where the effect is enabled by default in the library.

Basics

Wave or 'ripple' effect is widely used in the Material Design standard - it is elegant, indicates user interacion and adds additional depth to surfaces.

Generally, it takes mouse/tap coordinates returned by a click event and renders a CSS-based effect in the pin-pointed location on .ripple-parent parent element.

In mdbvue, wave effect is implemented as a mixin, meaning that most of the heavy lifting (methods, calculation, props declaration) is done for us and encapsulated. Below we present necessary steps to use the effect in a custom component.

Customization

Let's be completely honest - wave effect is awesome. It is very easy to use the mixin for custom components, too! This is why here we present steps you need to take to apply it whenever you want.

Step 1: import the mixin and list in the adequate property of exported object

        
            
      <script>
        import {
          waves
        } from 'mdbvue';

        export default {
          name: 'MyComponent',
          ...,
          mixins: [waves]
        }
      </script>

Step 2: designate the .ripple-parent

Use the CSS class to declare the ancestor, on which the wave-effect will be taking place.

        
            
      <template>
        <div class="my-component ripple-parent">
          {{message}}
        </div>
      </template>
      
        
    
        
            
      <script>
        import {
          waves
        } from 'mdbvue';

        export default {
          name: 'MyComponent',
          props: {
            message: {
              type: String,
              default: 'yay!'
            }
          },
          mixins: [waves]
        }
      </script>
      
        
    
        
            
      <style>
        .my-component {
          width: 100px;
          height: 100px;
          background-color: red;
          color: white
        }
      </style>

Step 3: Handle the click event

If wave-effect triggering part of your component does not emit a click event natively, add an event listener with wave function callback like so: @click="wave". The function is available for components that are using the waves mixin.

        
            
      <template>
        <div class="my-component ripple-parent" @click="wave">
          {{message}}
        </div>
      </template>
      
        
    
        
            
      <script>
        import {
          waves
        } from 'mdbvue';

        export default {
          name: 'MyComponent',
          props: {
            message: {
              type: String,
              default: 'yay!'
            }
          },
          mixins: [waves]
        }
      </script>
      
        
    
        
            
      <style>
        .my-component {
          width: 100px;
          height: 100px;
          background-color: red;
          color: white
        }
      </style>

Step 4 (optional): darkWaves

In case there is a bright-ish background for waves effect, consider using its dark variant by the darkWaves prop. All components with the mixin present on them are ready to receive it.

        
            
      <template>
        <MyComponent message="keep it dark" darkWaves />
      </template>

Components using waves

Wave effect is implemented in a number of components. In some of them, like mdbBtn buttons, they are enabled by default. Some, say, mdbMask overlay mask, require initialization through the waves prop. Here is a table of you can find the mixin used:

Component Name Implementation
mdbBtn by default
mdbCardImage requires waves prop
mdbDropdownToggle by default
mdbInput requires waves prop
mdbMask requires waves prop
mdbNavbarBrand requires waves prop
mdbNavItem by default
mdbPageItem by default
mdbPageNav by default
mdbChip by default, darkWaves too
mdbChipInput requires waves prop, darkWaves by default
mdbSideNav enabled by default in logo
mdbSideNavCat by default
mdbSideNavItem by default
mdbTabs by default