action

Ripple

By creating a ripple-like animation that emanates from a user's interaction

Set Up #

Import createRipple action in the script tag.

<script>
	import { createRipple } from '@sans-ui/core';
</script>

Usage #

For example, we can play createRipple transition effect, make sure that position is relative for the pareent component of your component gets passed createRipple’s return function.

<script>
	import { createRipple } from '@sans-ui/core';

	const ripple = createRipple();
</script>

<button class="bg-gray-300 p-4 rounded-full relative" use:ripple>
	You button with Ripple Effect
</button>