Package Exports

@material/line-ripple
@material/line-ripple/component
@material/line-ripple/dist/mdc.line-ripple.css
@material/line-ripple/dist/mdc.line-ripple.min.css
@material/line-ripple/dist/mdc.lineRipple
@material/line-ripple/dist/mdc.lineRipple.js
@material/line-ripple/foundation
@material/line-ripple/foundation.js
@material/line-ripple/index

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material/line-ripple) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 @material/line-ripple

Basic Usage

HTML Structure

<span class="mdc-line-ripple"></span>

Styles

@use "@material/line-ripple/mdc-line-ripple";

JavaScript Instantiation

import {MDCLineRipple} from '@material/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
`active-color($color)`	Customizes the color of the line ripple when active.
`inactive-color($color)`	Customizes the color of the line ripple when inactive.

`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.

@material/line-ripple