Vue Bootstrap Waves

Vue Waves - Bootstrap 4 & Material Design

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>