Svelte Material UI - Line Ripple
Line ripples are used to highlight input elements above them.
Installation
You won't generally need to install this package, unless you're manually creating text fields.
npm install --save-dev @smui/line-ripple
Whoa There, These Docs are Outdated
The latest SMUI v3 beta had a lot of changes, and these docs haven't been caught up yet. You should check out the demo page's code to see the latest usage.
Basic Usage
<!--
Normally you wouldn't provide a line ripple, but you can manually set up a
textfield like this:
-->
<Textfield>
<Input bind:value={name} id="name-input" />
<FloatingLabel for="name-input">Name</FloatingLabel>
<LineRipple />
</Textfield>
<script>
import Textfield, { Input } from '@smui/textfield';
import FloatingLabel from '@smui/floating-label';
import LineRipple from '@smui/line-ripple';
let name = '';
</script>
Demo
in action: https://sveltematerialui.com/demo/textfield
demo code: https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes/demo/textfield.svelte
Exports
todo...
More Information
See Text fields in the Material design spec.
See Line Ripple in MDC-Web for information about the upstream library's architecture.