ionic-team/ ionic-contrib-frosted-glass
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
123 Stars 
41 Forks 
MIT License 
11 Commits 
3 Opened issues 
Description
An optional frosted-glass effect for iOS 7 styled Ionic apps.
Services available
Contributors list
Readme
Ionic Frosted Glass
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);
}
});