A reusable frosted-glass effect for adding this cool iOS effect to your Ionic apps.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
.gitignore
LICENSE
README.md
bower.json
ionic.contrib.frost.css
ionic.contrib.frost.js

README.md

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();
  };
});