Vue Bootstrap Waves

Vue Waves - Bootstrap 4 & Material Design

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

The mdb-waves is a custom directive which adds on-click ripple effect to any element.

Live Preview

Basic usage

Step 1: Import the directive from 'mdbvue'

        
            
      <script>
        import {
          mdbWaves
        } from "mdbvue";
      </script>

Step 2: Add mdbWaves to the directives object 

        
            
      <script>
        import {
          mdbWaves
        } from "mdbvue";
        export default {
          directives: {
            mdbWaves
          }
        };
      </script>

Step 3: Attach the directive to any element. 

        
            
      <template>
        <section class="d-flex justify-content-center">
          <div v-mdb-waves style="width: 200px; height: 100px; background-color: #c23636;"></div>
        </section>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbWaves
        } from "mdbvue";
        export default {
          directives: {
            mdbWaves
          }
        };
      </script>

Options

Name Type Default Description Example
dark Boolean false Enables dark mode. <div v-mdb-waves="{ dark: true }"></div>
background String 'rgba(255, 255, 255, 0.3)' Specifies wave's background color <div v-mdb-waves="{ background: 'rgba(194,54,54,0.5)' }"></div>
duration String 'basic' Specifies duration of wave effect. Available options: ['long', 'basic', 'short']. <div v-mdb-waves="{ duration: 'long' }"></div>
center Boolean false Enables centered mode. <div v-mdb-waves="{ center: true }"></div>
fixed Boolean false Enables fixed mode. Use it for elements with fixed position. <div v-mdb-waves="{ fixed: true }"></div>