Blox Material v1.0.0

Ripple

The mdcRipple directive creates a configurable ripple surface.

Ripple

Ripple - Interact with me!
Unbounded Ripple - Interact with me!

API

Directive: MdcRippleDirective

Selector: [mdcRipple]

Directive for making an element a ripple surface. The ripple can be customized with the provided Sass Mixins. Alternatively you can set the surface to get a default styled ripple.

Property Description
@Input()
mdcRipple
boolean

Set this input to false to remove the ripple effect from the surface.
@Input()
unbounded
boolean

When this input has a value other than false, the ripple is unbounded. Surfaces for bounded ripples should have overflow set to hidden, while surfaces for unbounded ripples should have it set to visible.
@Input()
dimension
number

This input sets the dimension of the ripple. This input can be set to null for returning to the defaults, which uses the surface element to compute the bounds of the ripple.
@Input()
disabled
boolean

This input can be used to programmatically enable/disable the ripple. When true, the ripple effect will be disabled, when false the ripple effect will be enabled. When not set, or null (default) the ripple effect enabled/disabled state depend on whether or not the surface element has the disabled attribute set.
@Input()
surface
boolean | "primary" | "accent"

When this input has a value other than false, the ripple element will get the "mdc-ripple-surface" class. That class has styling for bounded and unbounded ripples in accordance with your theme customizations. Without this property, you have to supply your own ripple styles, using the provided Sass Mixins.

To apply a standard surface ripple, set the value to true, "primary", or "accent". The values primary and accent set the ripple color to the theme primary or secondary color.