Need help with ionic-contrib-frosted-glass?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ionic-team
123 Stars 40 Forks MIT License 11 Commits 3 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

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
 or 
 to get the frosted effect. Note: you must also
have a 
 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:
  
    

<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>

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

} });

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.