mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
Merge branch 'master' into alpha38
Conflicts: ionic/components/search-bar/search-bar.ts ionic/config/decorators.ts
This commit is contained in:
Adam Bradley
BIN
demos/blur/bg.jpg
Normal file
BIN
demos/blur/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 517 KiB |
21
demos/blur/index.html
Normal file
21
demos/blur/index.html
Normal 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
10
demos/blur/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
|
||||
class DemoApp {
|
||||
blur() {
|
||||
}
|
||||
}
|
||||
13
demos/blur/main.html
Normal file
13
demos/blur/main.html
Normal 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>
|
||||
@ -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'
|
||||
|
||||
10
ionic/components/blur/blur.ts
Normal file
10
ionic/components/blur/blur.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import {Directive, Renderer, ElementRef} from 'angular2/angular2';
|
||||
|
||||
@Directive({
|
||||
selector: '[ion-blur]'
|
||||
})
|
||||
export class Blur {
|
||||
constructor(private elementRef: ElementRef, private renderer: Renderer) {
|
||||
renderer.setElementStyle(elementRef, '-webkit-backdrop-filter', 'blur(10px)');
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,11 @@
|
||||
/**
|
||||
* @ngdoc service
|
||||
* @name Config
|
||||
* @module ionic
|
||||
* @description
|
||||
* IonicConfig allows you to set the modes of your components
|
||||
*/
|
||||
|
||||
import {IonicPlatform} from '../platform/platform';
|
||||
import {isObject, isDefined, isFunction, extend} from '../util/util';
|
||||
|
||||
@ -17,6 +25,29 @@ export class IonicConfig {
|
||||
|
||||
/**
|
||||
* For setting and getting multiple config values
|
||||
*/
|
||||
|
||||
/**
|
||||
* @name settings()
|
||||
* @description
|
||||
* IonicConfig lets you change multiple or a single value in an apps mode configuration. Things such as tab placement, icon changes, and view animations can be set here.
|
||||
*
|
||||
*
|
||||
* @usage
|
||||
* ```ts
|
||||
* import {IonicConfig} from 'ionic/ionic';
|
||||
* @App({
|
||||
* template: `<ion-nav [root]="root"></ion-nav>`
|
||||
* config: {
|
||||
* backButtonText: 'Go Back',
|
||||
* iconMode: 'ios',
|
||||
* modalEnter: 'modal-slide-in',
|
||||
* modalLeave: 'modal-slide-out',
|
||||
* tabBarPlacement: 'bottom',
|
||||
* viewTransition: 'ios',
|
||||
* }
|
||||
* })
|
||||
* ```
|
||||
*/
|
||||
settings() {
|
||||
const args = arguments;
|
||||
|
||||
@ -5,6 +5,7 @@ import {Menu} from '../components/menu/menu';
|
||||
import {MenuToggle} from '../components/menu/menu-toggle';
|
||||
import {MenuClose} from '../components/menu/menu-close';
|
||||
import {Button} from '../components/button/button';
|
||||
import {Blur} from '../components/blur/blur';
|
||||
import {Content} from '../components/content/content';
|
||||
import {Scroll} from '../components/scroll/scroll';
|
||||
import {Refresher} from '../components/scroll/pull-to-refresh';
|
||||
@ -48,6 +49,7 @@ export const IONIC_DIRECTIVES = [
|
||||
MenuClose,
|
||||
|
||||
Button,
|
||||
Blur,
|
||||
Content,
|
||||
Scroll,
|
||||
Refresher,
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
/**
|
||||
+* @ngdoc service
|
||||
+* @name platform
|
||||
+* @module ionic
|
||||
+* @description
|
||||
+* IonicPlatform returns the availble information about your current platform
|
||||
+*/
|
||||
|
||||
|
||||
import * as util from '../util/util';
|
||||
import * as dom from '../util/dom';
|
||||
|
||||
@ -20,17 +29,44 @@ export class IonicPlatform {
|
||||
// **********************************************
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @param {TODO} platformName TODO
|
||||
* @returns {TODO} TODO
|
||||
* @param {string} platformName
|
||||
* @returns {bool}
|
||||
*
|
||||
* ```
|
||||
* import {IonicPlatform} 'ionic/ionic';
|
||||
* export MyClass {
|
||||
* constructor(platform: IonicPlatform){
|
||||
* this.platform = platform;
|
||||
* if(this.platform.is('ios'){
|
||||
* // what ever you need to do for
|
||||
* // if the platfomr is ios
|
||||
* }
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
is(platformName) {
|
||||
return (this._platforms.indexOf(platformName) > -1);
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @returns {TODO} TODO
|
||||
* @returns {array} the array of platforms
|
||||
* @description
|
||||
* Depending on what device you are on, `platforms` can return multiple values.
|
||||
* Each possible value is a hierarchy of platforms. For example, on an iPhone,
|
||||
* it would return mobile, ios, and iphone.
|
||||
*
|
||||
* ```
|
||||
* import {IonicPlatform} 'ionic/ionic';
|
||||
* export MyClass {
|
||||
* constructor(platform: IonicPlatform){
|
||||
* this.platform = platform;
|
||||
* console.log(this.platform.platforms());
|
||||
* // This will return an array of all the availble platforms
|
||||
* // From if your on mobile, to mobile os, and device name
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
platforms() {
|
||||
// get the array of active platforms, which also knows the hierarchy,
|
||||
@ -40,8 +76,24 @@ export class IonicPlatform {
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @param {TODO} platformName TODO
|
||||
* @returns {TODO} TODO
|
||||
* @param {string} platformName
|
||||
* @returns {object}
|
||||
* @description
|
||||
* Returns an object containing the os version
|
||||
*
|
||||
* ```
|
||||
* import {IonicPlatform} 'ionic/ionic';
|
||||
* export MyClass {
|
||||
* constructor(platform: IonicPlatform){
|
||||
* this.platform = platform;
|
||||
* console.log(this.platform.versions('android'));
|
||||
* // Returns an object with the os version as a string,
|
||||
* // The Major version as a string
|
||||
* // The Minor version as a string
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
versions(platformName) {
|
||||
if (arguments.length) {
|
||||
@ -55,7 +107,22 @@ export class IonicPlatform {
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @returns {TODO} TODO
|
||||
* @returns {promise}
|
||||
* @description
|
||||
* Returns a promise when the platform is ready and native functionality can be called
|
||||
*
|
||||
* ```
|
||||
* import {IonicPlatform} 'ionic/ionic';
|
||||
* export MyClass {
|
||||
* constructor(platform: IonicPlatform){
|
||||
* this.platform = platform;
|
||||
* this.platform.ready().then(() => {
|
||||
* console.log('Platform ready');
|
||||
* // The platform is now ready, execute any native code you want
|
||||
* });
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
ready() {
|
||||
return this._readyPromise;
|
||||
|
||||
Reference in New Issue
Block a user