Package Exports

@material/line-ripple
@material/line-ripple/dist/mdc.line-ripple.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 text above it. When a line ripple is active, the line’s color and thickness vary.

Design & API Documentation

Material Design guidelines: Text Fields Layout

Usage

HTML Structure

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

Usage within `mdc-text-field`

<div class="mdc-text-field">
  <input type="text" id="my-text-field-id" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
  <div class="mdc-line-ripple"></div>
</div>

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`

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

`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
`setAttr(attr: string, value: string) => void`	Sets an attribute with a given value on the root element
`registerEventHandler(evtType: string, handler: EventListener) => void`	Registers an event listener on the root element for a given event
`deregisterEventHandler(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