Ink Defaults

Invoke ionicMaterialInk.displayEffect(); in a directive or controller to activate all ink-elements on the screen.

Once the displayEffect() has been called, elements containing the following classes will automatically contain ink when tapped: .button-fab, .button-flat, .button-raised, .button-clear, and .tab-item.

Material Buttons Have Ink by Default



...So do tabs!

To Add Ink To Non-Defaults

Add the .ink class to non-inline elements.
Touch to see my ripples
Pro tip: Only use ink on elements that provide action.

For Dark Ink

Ink is by default, 40% opacity white. Add the .ink-dark class to change to 20% opacity black ink.



<button class="button button-fab button-balanced icon ion-leaf ink-dark"></button>

Any Colored Ink

Use data-ink-color with a hexadecimal color value and data-ink-opacity with a decimal for opacity.


<button class="button button-royal button-raised icon-right ion-ios-color-wand" data-ink-color="#CD3385" data-ink-opacity=".8"></button>