javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(blur): iOS Blur Directive

Browse Source
This commit is contained in:
Max Lynch
2015-10-07 09:27:48 -05:00
parent 17ecb54e52
commit ce6dbd1ee2
7 changed files with 61 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
demos/blur/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 517 KiB

21
demos/blur/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="../../css/ionic.css" rel="stylesheet">
</head>
<body>
<ion-app>
<ion-loading-icon></ion-loading-icon>
</ion-app>
<script src="../../js/ionic.bundle.js"></script>
<script>System.import("index");</script>
</body>
</html>

10
demos/blur/index.ts Normal file
View File

@ -0,0 +1,10 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class DemoApp {
blur() {
}
}

13
demos/blur/main.html Normal file
View File

@ -0,0 +1,13 @@
<ion-toolbar>
<ion-title>Blur</ion-title>
</ion-toolbar>
<ion-content padding style="text-align:center; background: url('bg.jpg') no-repeat transparent; background-size: cover">
<button (click)="showBlur=true" primary>Blur</button>
<div ion-blur (click)="showBlur=false" *ng-if="showBlur" style="display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8);">"
<h2>Blurred!</h2>
</div>
</ion-content>

1
ionic/components.ts
View File

@ -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'

11
ionic/components/blur/blur.ts Normal file
View File

@ -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)');
}
}

6
ionic/config/decorators.ts
View File

@ -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)
];
/**