Vue logo

v-wave

The material-ripple directive for Vue that actually works

Back to Github


<!-- Edit me (all options are set to their default) -->
<div
  class="box"
  v-wave="{
    color: 'currentColor',
    initialOpacity: 0.2,
    finalOpacity: 0.1,
    duration: 0.4,
    dissolveDuration: 0.15,
    waitForRelease: true,
    easing: 'ease-out',
    cancellationPeriod: 75,
    trigger: 'auto',
    tagName: 'div',
    disabled: false,
    respectDisabledAttribute: true,
    respectPrefersReducedMotion: true,
    stopPropagation: false,
  }"
>
  Click here
</div>
Click here

Basic Examples

default
default (currentColor demo)
border-radius
radial-gradient

Examples using triggers

<label
  v-wave
  class="text-input"
>
  <input type="text" placeholder="Search" />
  
  <!-- Only show the wave when the trigger is clicked -->
  <img v-wave-trigger src="./imgs/search.svg" />
</label>

Just an example of the flexibility that triggers provide (click/tap any box)