https://github.com/ionic-team/ionic-ion-frost

A reusable frosted-glass effect for adding this cool iOS effect to your Ionic apps.
https://github.com/ionic-team/ionic-ion-frost

Last synced: 2 months ago
JSON representation

A reusable frosted-glass effect for adding this cool iOS effect to your Ionic apps.

• Host: GitHub
• URL: https://github.com/ionic-team/ionic-ion-frost
• Owner: ionic-team
• License: mit
• Archived: true
• Created: 2014-09-06T23:01:52.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-10-15T03:17:47.000Z (over 10 years ago)
• Last Synced: 2025-01-18T21:58:33.262Z (about 1 year ago)
• Language: JavaScript
• Size: 166 KB
• Stars: 62
• Watchers: 23
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
Ionic Contrib: Frosted Glass

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

A reusable frosted-glass effect for adding this cool iOS effect to your Ionic apps. (this is an updated and more generic version of our old [Ionic Frosted Glass Header](https://github.com/driftyco/ionic-contrib-frosted-glass) contrib). It looks like this:

See the Pen Ionic Contrib: Frost by Ionic (@ionic) on CodePen.




### Use

To use, add the attribute `frost` to the element you want to blur. Then, you'll want to add an overlay to give a nice faded effect for content on top. The demo has a dark overlay you can use:

```html

// Example dark overlay:

.my-overlay {

  background-color: #222;

  opacity: 0.8;

}

```

See `demo/index.html` for an example.

### Updating the Frost

When the content changes underneath, you need to update the frosted effect. To do that in a controller (for example), inject the `$ionicFrostedDelegate` and call `update()` on it:

```javascript

controller('MyCtrl', function($scope, $ionicFrostedDelegate) {

  $scope.contentChanged = function() {

    $ionicFrostedDelegate.update();

  };

});

```