@smui/line-ripple

Svelte Material UI - Line Ripple

Line ripples are used to highlight input elements above them.

See MDC Line Ripple for more information on API and Sass mixins.

Installation

You won't generally need to install this package, unless you're manually creating text fields.

npm install --save-dev @smui/line-ripple

Basic Usage

<script>
  import Textfield, {Input} from '@smui/textfield';
  import FloatingLabel from '@smui/floating-label';
  import LineRipple from '@smui/line-ripple';

  let name = '';
</script>

<!--
  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>

Demo

in action: https://sveltematerialui.com/#/demo/textfield

demo code: https://github.com/hperrin/svelte-material-ui/blob/master/site/demos/Textfield.svelte

Exports

todo...

Changelog

1.0.0-beta.11 (2019-09-06)

Bug Fixes

• allow for prop on wrapped floating label (b69049c)
• import styles correctly (37e6fa6)

Features

• provide bare js and css (button only for test) for use in REPL (1b9a268)