@loipham/material-floating-label
v14.0.4
Published
The Material Components for the web floating-label component
Downloads
6
Maintainers
Readme
Floating Label
Floating 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.
Design & API Documentation
Installation
npm install @loipham/material-floating-label
Basic Usage
HTML Structure
<span class="mdc-floating-label" id="my-label-id">Hint text</span>
Styles
@use "@loipham/material-floating-label/mdc-floating-label";
JavaScript Instantiation
import {MDCFloatingLabel} from '@loipham/material-floating-label';
const floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));
Style Customization
CSS Classes
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.
mdc-floating-label--required
| Indicates the label is required and adds an asterisk.
Sass Mixins
Mixin | Description
--- | ---
ink-color($color)
| Customizes the ink color of the label.
fill-color($color)
| Customizes the fill color of the label.
shake-keyframes($modifier, $positionY, $positionX, $scale)
| Generates a CSS @keyframes
at-rule for an invalid label shake. Used in conjunction with the shake-animation
mixin.
shake-animation($modifier)
| Applies shake keyframe animation to label.
float-position($positionY, $positionX, $scale)
| Sets position of label when floating.
max-width($max-width)
| Sets the max width of the label.
float-transition($duration-ms, $timing-function)
| Customizes the duration and optional timing function for the "float" transition.
MDCFloatingLabel
Properties and Methods
Method Signature | Description
--- | ---
shake(shouldShake: boolean) => void
| Proxies to the foundation's shake()
method.
float(shouldFloat: boolean) => void
| Proxies to the foundation's float()
method.
setRequired(isRequired: boolean) => void
| Proxies to the foundation's setRequired()
method.
getWidth() => number
| Proxies to the foundation's getWidth()
method.
Usage Within Frameworks
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.
MDCFloatingLabelAdapter
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.
MDCFloatingLabelFoundation
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
.
setRequired(isRequired: boolean)
| Styles the label as required, depending on the value of isRequired
.
getWidth() => number
| Returns the width of the label element.