How to use the @material/floating-label/foundation.MDCFloatingLabelFoundation.cssClasses function in @material/floating-label
To help you get started, we’ve selected a few @material/floating-label examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
material-components / material-components-web-react / packages / notched-outline / index.tsx View on Github 
get label() {
if (!this.notchedEl.current) {
return null;
}
return this.notchedEl.current.querySelector(`.${MDCFloatingLabelFoundation.cssClasses.ROOT}`);
}onShakeEnd = () => {
const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
this.removeClassFromClassList(LABEL_SHAKE);
};initialSyncWithDOM() {
this.notchElement_ = this.root_.querySelector(strings.NOTCH_ELEMENT_SELECTOR)!;
const label = this.root_.querySelector('.' + MDCFloatingLabelFoundation.cssClasses.ROOT);
if (label) {
label.style.transitionDuration = '0s';
this.root_.classList.add(cssClasses.OUTLINE_UPGRADED);
requestAnimationFrame(() => {
label.style.transitionDuration = '';
});
} else {
this.root_.classList.add(cssClasses.NO_LABEL);
}
}@material/floating-label
The Material Components for the web floating-label component
Package Health Score
82 / 100Popular @material/floating-label functions
- @material/floating-label.cssClasses.LABEL_SHAKE
- @material/floating-label.MDCFloatingLabel.attachTo
- @material/floating-label.MDCFloatingLabelFoundation
- @material/floating-label/component.MDCFloatingLabel
- @material/floating-label/foundation
- @material/floating-label/foundation.js.MDCFloatingLabelFoundation
- @material/floating-label/foundation.MDCFloatingLabelFoundation
- @material/floating-label/foundation.MDCFloatingLabelFoundation.cssClasses
- @material/floating-label/index.MDCFloatingLabel