14.0.0 • Published 4 months ago

@material/line-ripple v14.0.0

Weekly downloads
66,741
License
MIT
Repository
github
Last release
4 months ago

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

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 ClassDescription
mdc-line-rippleMandatory.
mdc-line-ripple--activeStyles the line ripple as an active line ripple.
mdc-line-ripple--deactivatingStyles the line ripple as a deactivating line ripple.

Sass Mixins

MixinDescription
mdc-line-ripple-color($color)Customizes the color of the line ripple when active.

MDCLineRipple

Method SignatureDescription
activate() => voidProxies to the foundation's activate() method.
deactivate() => voidProxies to the foundation's deactivate() method.
setRippleCenter(xCoordinate: number) => voidProxies to the foundation's setRippleCenter(xCoordinate: number) method.

MDCLineRippleAdapter

Method SignatureDescription
addClass(className: string) => voidAdds a class to the root element.
removeClass(className: string) => voidRemoves a class from the root element.
setStyle(propertyName: string, value: string) => voidSets the style property with propertyName to value on the root element.
registerEventHandler(evtType: string, handler: EventListener) => voidRegisters an event listener on the root element for a given event.
deregisterEventHandler(handler: EventListener) => voidDeregisters an event listener on the root element for a given event.

MDCLineRippleFoundation

Method SignatureDescription
activate() => voidActivates the line ripple.
deactivate() => voidDeactivates the line ripple.
setRippleCenter(xCoordinate: number) => voidSets the center of the ripple to the xCoordinate given.
handleTransitionEnd(evt: Event) => voidHandles a transitionend event.
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.1.0-alpha.0

5 years ago

3.0.0

5 years ago

3.0.0-alpha.1

5 years ago

3.0.0-alpha.0

5 years ago

2.3.0

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.43.0

5 years ago

0.41.0

5 years ago

0.40.1

5 years ago

0.40.0

6 years ago

0.39.3

6 years ago

0.39.2

6 years ago

0.39.1

6 years ago

0.39.0

6 years ago

0.38.0

6 years ago

0.35.0

6 years ago

0.34.0

6 years ago

0.33.0

6 years ago

0.32.0

6 years ago

0.30.0

6 years ago