@smui/notched-outline

Svelte Material UI - Notched Outline

Notched outlines are borders around input components.

Installation

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

npm install --save-dev @smui/notched-outline

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 notched outline, but you can manually set up a
  textfield like this:
-->
<Textfield variant="outlined">
  <Input bind:value={name} id="name-input" />
  <NotchedOutline>
    <FloatingLabel for="name-input">Name</FloatingLabel>
  </NotchedOutline>
</Textfield>

<script>
  import Textfield, { Input } from '@smui/textfield';
  import FloatingLabel from '@smui/floating-label';
  import NotchedOutline from '@smui/notched-outline';

  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/

Exports

todo...

More Information

See Text fields in the Material design spec.

See Notched Outline in MDC-Web for information about the upstream library's architecture.

Changelog

3.0.0-beta.3 (2021-04-12)

Bug Fixes

• add ripple style on buttons when style prop is defined (aa65603)
• allow styles on components with ripples (1c6b28a)
• don't focus tab when activated programmatically by default (59c66b1)
• floating label noLabel default to false (cf06c28)
• outlined textfield labels (07e7544)
• reference error on button GroupItem (41402f8)