Ionic Contrib: Frosted Glass

A reusable frosted-glass effect for adding this cool iOS effect to your Ionic apps. (this is an updated and more generic version of our old Ionic Frosted Glass Header contrib). It looks like this:

See the Pen Ionic Contrib: Frost by Ionic (@ionic) on CodePen.

<script async src="//codepen.io/assets/embed/ei.js"></script>

Use

To use, add the attribute frost to the element you want to blur. Then, you'll want to add an overlay to give a nice faded effect for content on top. The demo has a dark overlay you can use:

<ion-pane frost>
</ion-pane>
<ion-pane class="my-overlay">
</ion-pane>
<style>
// Example dark overlay:
.my-overlay {
  background-color: #222;
  opacity: 0.8;
}
</style>

See demo/index.html for an example.

Updating the Frost

When the content changes underneath, you need to update the frosted effect. To do that in a controller (for example), inject the $ionicFrostedDelegate and call update() on it:

controller('MyCtrl', function($scope, $ionicFrostedDelegate) {
  $scope.contentChanged = function() {
    $ionicFrostedDelegate.update();
  };
});