Line Ripple
The line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.
Design & API Documentation
Installation
npm install @limetech/mdc-p2-line-ripple
Basic Usage
HTML Structure
<div class="mdc-line-ripple"></div>
Styles
@import "@limetech/mdc-p2-line-ripple/mdc-line-ripple";
JavaScript Instantiation
import {MDCLineRipple} from '@limetech/mdc-p2-line-ripple';
const lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));
Style Customization
CSS Classes
CSS Class | Description |
---|---|
mdc-line-ripple |
Mandatory. |
mdc-line-ripple--active |
Styles the line ripple as an active line ripple. |
mdc-line-ripple--deactivating |
Styles the line ripple as a deactivating line ripple. |
Sass Mixins
Mixin | Description |
---|---|
mdc-line-ripple-color($color) |
Customizes the color of the line ripple when active. |
MDCLineRipple
Properties and Methods
Method Signature | Description |
---|---|
activate() => void |
Proxies to the foundation's activate() method. |
deactivate() => void |
Proxies to the foundation's deactivate() method. |
setRippleCenter(xCoordinate: number) => void |
Proxies to the foundation's setRippleCenter(xCoordinate: number) method. |
Usage Within Frameworks
If you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple 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.
MDCLineRippleAdapter
Method Signature | Description |
---|---|
addClass(className: string) => void |
Adds a class to the root element. |
removeClass(className: string) => void |
Removes a class from the root element. |
hasClass(className: string) => boolean |
Determines whether the root element has the given CSS class name. |
setStyle(propertyName: string, value: string) => void |
Sets the style property with propertyName to value on the root element. |
registerEventHandler(evtType: EventType, handler: EventListener) => void |
Registers an event listener on the root element for a given event. |
deregisterEventHandler(evtType: EventType, handler: EventListener) => void |
Deregisters an event listener on the root element for a given event. |
MDCLineRippleFoundation
Method Signature | Description |
---|---|
activate() => void |
Activates the line ripple. |
deactivate() => void |
Deactivates the line ripple. |
setRippleCenter(xCoordinate: number) => void |
Sets the center of the ripple to the xCoordinate given. |
handleTransitionEnd(evt: Event) => void |
Handles a transitionend event. |