Skip to content

Ripple

A material ripple effect that is visible on clicking, you can use it with or without JS by adding animation-ripple class. Use with Button or any other component.

View Source 

Usage

css
@import "winduum/utilities/ripple.css" layer(components);
js
import { showRipple } from 'winduum/src/utilities/ripple'

document.querySelector('#showRipple').addEventListener('click', (e) => {
    showRipple(e)
})
vue
<script setup>
    import { ref } from 'vue'
    import { showRipple } from 'winduum/src/utilities/ripple'
    import { UiBtn } from 'winduum-vue/components/ui/btn'
</script>

<template>
    <UiBtn @click="showRipple">Show ripple</UiBtn>
</template>

Example

html
<button class="ui-btn" id="showRipple">Show ripple</button>
js
import { showRipple } from 'winduum/src/utilities/ripple'

document.querySelector('#showRipple').addEventListener('click', event => {
    showRipple(event)
})

Javascript API

showRipple

  • Type: (event) => <void>
  • Kind: sync

Shows an animated ripple effect on a element

Released under the MIT License.