-
Notifications
You must be signed in to change notification settings - Fork 129
Buttons
A no thrills button:
<button class="button">some text</button>
What you also get for free is the Material Design "Ripple". As part of the Google's Material Design spec. If you don't want the "Ripple" add no-ripple to the button markup as an attribute. e.g.
<button class="button" no-ripple>ripple-less button</button>
You can also apply any of the other classes available in Ionic by default: http://ionicframework.com/docs/components/#buttons
The button directive automatically adds 2 classes to the button element for you, this means you don't have to manually add or trigger the "Ripple" effect. As per Google's Material Design Specification the "Ripple" is available by default, so having to add this yourself seems really mean..
So we add these 2 classes mdl-js-button mdl-js-ripple-effect to your button element for you.
mdl-js-button tells Material Design Lite you want to include your button as a Material component, which means it gets registered automatically with MDLs Component Handler. This adds all the nice Material goodness.
mdl-js-ripple-effect enables the "Ripple" component registered with MDLs Component Handler. This adds additional CSS classes and creates a couple wrapping elements to contain the actual effect.
You may not want the Material Design ripple applied by default to your buttons, you can disable the effect app wide by adding the following into your app config:
angular.module('awesome-app', ['ionic']).config(function ($ionicMaterialConfigProvider) {
$ionicMaterialConfigProvider.useMaterialRipple = false;
}).run();
You might also want to force the Material Design ripple effect onto some buttons within your application, add force-ripple as an attribute to your button markup.
<button class="button button-positive" force-ripple>Ripple Button</button>