The Material Components for the web floating-label component
npm install @limetech/mdc-floating-labelFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's placeholder attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.
```
npm install @limetech/mdc-floating-label
`html`
`scss`
@import "@limetech/mdc-floating-label/mdc-floating-label";
`js
import {MDCFloatingLabel} from '@limetech/mdc-floating-label';
const floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));
`
If you're using the JavaScript-enabled version of floating label, you can avoid needing to assign
a unique id to each by wrapping mdc-text-field__input within a
`html`
> NOTE: This method also works with
CSS Class | Description
--- | ---
mdc-floating-label | Mandatory.mdc-floating-label--float-above | Indicates the label is floating in the floating position.mdc-floating-label--shake | Shakes the label.
Mixin | Description
--- | ---
mdc-floating-label-ink-color($color) | Customizes the ink color of the label.mdc-floating-label-fill-color($color) | Customizes the fill color of the label.mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale) | Generates a CSS @keyframes at-rule for an invalid label shake. Used in conjunction with the mdc-floating-label-shake-animation mixin.mdc-floating-label-shake-animation($modifier) | Applies shake keyframe animation to label.mdc-floating-label-float-position($positionY, $positionX, $scale) | Sets position of label when floating.mdc-floating-label-max-width($max-width) | Sets the max width of the label.
Properties and MethodsMethod Signature | Description
--- | ---
shake(shouldShake: boolean) => void | Proxies to the foundation's shake() method.float(shouldFloat: boolean) => void | Proxies to the foundation's float() method.getWidth() => number | Proxies to the foundation's getWidth() method.
If you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions here.
Method Signature | Description
--- | ---
addClass(className: string) => void | Adds a class to the label element.removeClass(className: string) => void | Removes a class from the label element.getWidth() => number | Returns the width of the label element.registerInteractionHandler(evtType: string, handler: EventListener) => void | Registers an event listener for a given event.deregisterInteractionHandler(evtType: string, handler: EventListener) => void | Deregisters an event listener for a given event.
Method Signature | Description
--- | ---
shake(shouldShake: boolean) | Shakes or stops shaking the label, depending on the value of shouldShake.float(shouldFloat: boolean) | Floats or docks the label, depending on the value of shouldFloat.getWidth() => number` | Returns the width of the label element.