https://github.com/ionic-team/ionic-contrib-frosted-glass

An optional frosted-glass effect for iOS 7 styled Ionic apps.
https://github.com/ionic-team/ionic-contrib-frosted-glass

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ionic-team/ionic-contrib-frosted-glass
• Owner: ionic-team
• License: mit
• Archived: true
• Created: 2014-01-31T18:11:33.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2015-05-26T17:57:55.000Z (over 9 years ago)
• Last Synced: 2024-09-26T16:41:27.225Z (about 1 month ago)
• Language: JavaScript
• Size: 7.82 MB
• Stars: 123
• Watchers: 17
• Forks: 40
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Ionic Frosted Glass

===========================

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

[Demo here](http://ionicframework.com/demos/frosted-glass/)

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:

```html

  

    

    

      


        


        

      

    

  


```

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:

```javascript

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

  }

});

```