Package Exports
- @smui/ripple
- @smui/ripple/bare.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@smui/ripple) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Svelte Material UI - Ripple
Ripples are an interaction feedback mechanism.
See MDC Ripple for more information on API and Sass mixins.
See the Sass variable file for styling variables.
Installation
npm install --save-dev @smui/rippleBasic Usage
<script>
import Ripple from '@smui/ripple';
</script>
<p use:Ripple={{ripple: true, color: 'surface'}} tabindex="0">
Here is an element with a ripple.
</p>Demo
in action: https://sveltematerialui.com/demo/ripple
demo code: https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes/demo/ripple.svelte
Exports
(default)
A ripple Svelte action.
Props / Defaults
The action accepts an array, with two entries. The first is a boolean, whether the ripple is enabled. The second is an object with the props:
ripple- Whether to enable the ripple.unbounded- Whether the ripple is unbounded.disabled- Whether the element is disabled.color- The ripple color. ('surface', 'primary', or 'secondary')classForward- A function that receives an array of classes. This is used to work around Svelte removing ripple classes in certain scenarios.