Svelte Material Ripple is a library for adding ripple effects to elements. Its implementation is based on the official md-ripple web component.
Read the full documentation.
This package has been deprecated in favor of the framework-agnostic material-ripple-web.
Install the package from npm using your preferred package manager.
npm install -D svelte-material-ripple
pnpm add -D svelte-material-ripple
yarn add -D svelte-material-ripple
bun add -D svelte-material-ripple
Import the Ripple
component and place it in a position: relative
container.
<script>
import { Ripple } from "svelte-material-ripple";
</script>
<button class="relative">
<Ripple />
</button>
<style>
.relative {
position: relative;
}
</style>
In the spirit of progressive enhancment, ripples use a simpler CSS-based implementation when JavaScript is not available.
Ripples support theming using CSS variables.
Token | Default |
---|---|
--ripple-hover-color |
currentColor |
--ripple-hover-opacity |
0.08 |
--ripple-pressed-color |
currentColor |
--ripple-pressed-opacity |
0.12 |
<script>
import { Ripple } from "svelte-material-ripple";
</script>
<button
class="relative"
style:--ripple-hover-color="red"
style:--ripple-hover-opacity="0.1"
style:--ripple-pressed-color="red"
style:--ripple-pressed-opacity="0.2"
>
<Ripple />
</button>
<style>
.relative {
position: relative;
}
</style>
Ripples also support theming using props.
<Ripple
hoverColor="red"
hoverOpacity={0.1}
pressedColor="red"
pressedOpacity={0.2}
/>
The underlying HTML element.
You can bind to this prop to access the ripple element.
Pass true
to disable the ripple.
@default false
The color of the ripple when the element is hovered.
@default 'currentColor'
The opacity of the ripple when the element is hovered.
@default 0.08
The color of the ripple when the element is pressed.
@default 'currentColor'
The opacity of the ripple when the element is pressed.
@default 0.12
The easing function to use for the ripple animation.
@default 'cubic-bezier(0.2, 0, 0, 1)'
The duration of the ripple animation.
If a number is passed, the unit is assumed to be in ms.
@default 450
Pass true
to disable the fallback ripple when JavaScript is not available.
@default false
Custom class applied to the ripple element.