An optional frosted-glass effect for iOS 7 styled Ionic apps.
An optional frosted-glass effect for iOS 7 styled Ionic apps.
To use, include
ionic.contrib.frostedGlass.cssand
ionic.contrib.frostedGlass.jsin your app.
Then, apply the
frosted-barattribute 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-frostedfor 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
$ionicFrostedDelegateservice:
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);
} });