feat(blur): iOS Blur Directive

ionic/components.ts

@@ -2,6 +2,7 @@
 export * from 'ionic/components/app/app'
 export * from 'ionic/components/app/id'
 export * from 'ionic/components/action-sheet/action-sheet'
+export * from 'ionic/components/blur/blur'
 export * from 'ionic/components/button/button'
 export * from 'ionic/components/card/card'
 export * from 'ionic/components/checkbox/checkbox'

ionic/components/blur/blur.ts

@@ -0,0 +1,11 @@
+import {Directive, Renderer, ElementRef} from 'angular2/angular2';
+
+@Directive({
+  selector: '[ion-blur]'
+})
+export class Blur {
+  constructor(private elementRef: ElementRef, private renderer: Renderer) {
+    console.log('Blur renderer', renderer);
+    renderer.setElementStyle(elementRef, '-webkit-backdrop-filter', 'blur(10px)');
+  }
+}

ionic/config/decorators.ts

@@ -18,7 +18,8 @@ import {
   Nav, NavbarTemplate, Navbar,
   NavPush, NavPop, NavRouter,
   IdRef,
-  ShowWhen, HideWhen
+  ShowWhen, HideWhen,
+  Blur
 } from '../ionic';
 
 /**
@@ -93,6 +94,9 @@ export const IONIC_DIRECTIVES = [
 
   forwardRef(() => ShowWhen),
   forwardRef(() => HideWhen)
+
+  // Random effects
+  forwardRef(() => Blur)
 ];
 
 /**