An optional frosted-glass effect for iOS 7 styled 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.
.cordova
platforms
plugins
www
.gitignore
LICENSE
README.md
ionic.contrib.frostedGlass.css
ionic.contrib.frostedGlass.js

README.md

Ionic Frosted Glass

An optional frosted-glass effect for iOS 7 styled Ionic apps.

Demo here

To use, include ionic.contrib.frostedGlass.css and ionic.contrib.frostedGlass.js in your app.

Then, apply the frosted-bar attribute directive to a <header-bar> or <nav-bar> to get the frosted effect. Note: you must also have a <content> directive on the page which is where the content will be taken from for the blur. Also, feel free to use the extra class bar-frosted for header bars that comes with the CSS, which gives you a light grey header bar much like iMessage:

<body>
  <pane ng-controller="PageCtrl">
    <header-bar frosted-bar title="'Title'" type="bar-frosted"></header-bar>

    <content has-header="true" has-footer="true" padding="true">
      <ol class="messages">
        <li ng-repeat="message in messages" ng-bind-html="message.content">
        </li>
      </ol>
    </content>
  </pane>
</body>

Unfortunately, it's not feasible to auto blur the content if it changes. To notify the frosted glass system to redraw itself, you can use the $ionicFrostedDelegate service:

controller('MyCtrl', function($scope, $ionicFrostedDelegate, $ionicScrollDelegate) {
  $scope.addNew = function() {
    // Add new data
    
    // Resize the scroll area
    $ionicScrollDelegate.resize();

    // Update the frosted glass system
    $ionicFrostedDelegate.update();

    // If you wish, scroll to the bottom of the scroll box to show the new content
    $timeout(function() {
      $ionicScrollDelegate.scrollBottom(true);
    }, 1);
  }
});