javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(content): use @ViewChild to find content component

Browse Source
This commit is contained in:
Adam Bradley
2016-04-12 09:37:51 -05:00
parent 16a283efe7
commit 5ceb5df238
2 changed files with 58 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
ionic/components/content/content.ts
View File

@@ -4,9 +4,8 @@ import {Ion} from '../ion';
import {IonicApp} from '../app/app';
import {Config} from '../../config/config';
import {Keyboard} from '../../util/keyboard';
import {raf, transitionEnd, pointerCoord} from '../../util/dom';
import {raf, transitionEnd} from '../../util/dom';
import {ViewController} from '../nav/view-controller';
import {Animation} from '../../animations/animation';
import {ScrollView} from '../../util/scroll-view';
/**
@@ -208,6 +207,9 @@ export class Content extends Ion {
setTimeout(next, 100);
}
/**
* @private
*/
onScrollElementTransitionEnd(callback: Function) {
transitionEnd(this._scrollEle, callback);
}
@@ -216,31 +218,30 @@ export class Content extends Ion {
* Scroll to the specified position.
*
* ```ts
* import {ViewChild} from 'angular2/core';
* import {Content} from 'ionic-angular';
*
* @Page({
* template: `<ion-content id="my-content">
* <button (click)="scrollTo()"> Down 500px</button>
* </ion-content>`
* template: `<ion-content>
* <button (click)="scrollTo()">Down 500px</button>
* </ion-content>`
* )}
* export class MyPage{
* constructor(app: IonicApp){
* this.app = app;
* }
* // Need to wait until the component has been initialized
* ngAfterViewInit() {
* // Here 'my-content' is the ID of my ion-content
* this.content = this.app.getComponent('my-content');
* @ViewChild(Content) content: Content;
*
* scrollTo() {
* // set the scrollLeft to 0px, and scrollTop to 500px
* // the scroll duration should take 200ms
* this.content.scrollTo(0, 500, 200);
* }
* scrollTo() {
* this.content.scrollTo(0, 500, 200);
* }
* }
* ```
* @param {number} x The x-value to scroll to.
* @param {number} y The y-value to scroll to.
* @param {number} duration Duration of the scroll animation in ms.
* @returns {Promise} Returns a promise when done
* @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`.
* @returns {Promise} Returns a promise which is resolved when the scroll has completed.
*/
scrollTo(x: number, y: number, duration: number): Promise<any> {
scrollTo(x: number, y: number, duration: number = 300): Promise<any> {
return this._scroll.scrollTo(x, y, duration);
}
@@ -248,31 +249,45 @@ export class Content extends Ion {
* Scroll to the top of the content component.
*
* ```ts
* import {ViewChild} from 'angular2/core';
* import {Content} from 'ionic-angular';
*
* @Page({
* template: `<ion-content id="my-content">
* <button (click)="scrollTop()"> Down 500px</button>
* </ion-content>`
* template: `<ion-content>
* <button (click)="scrollToTop()">Scroll to top</button>
* </ion-content>`
* )}
* export class MyPage{
* constructor(app: IonicApp){
* this.app = app;
* }
* // Need to wait until the component has been initialized
* ngAfterViewInit() {
* // Here 'my-content' is the ID of my ion-content
* this.content = this.app.getComponent('my-content');
* @ViewChild(Content) content: Content;
*
* scrollToTop() {
* this.content.scrollToTop();
* }
* scrollTop() {
* this.content.scrollToTop();
* }
* }
* ```
* @returns {Promise} Returns a promise when done
* @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`.
* @returns {Promise} Returns a promise which is resolved when the scroll has completed.
*/
scrollToTop(duration: number = 300) {
return this.scrollTo(0, 0, duration);
}
/**
* Get the `scrollTop` property of the content's scrollable element.
* @returns {number}
*/
getScrollTop(): number {
return this._scroll.getTop();
}
/**
* Set the `scrollTop` property of the content's scrollable element.
* @param {number} top
*/
setScrollTop(top: number) {
this._scroll.setTop(top);
}
/**
* @private
*/
@@ -280,20 +295,6 @@ export class Content extends Ion {
return this._scroll.jsScroll(onScrollCallback);
}
/**
* @private
*/
getScrollTop(): number {
return this._scroll.getTop();
}
/**
* @private
*/
setScrollTop(top: number) {
this._scroll.setTop(top);
}
/**
* @private
*/
@@ -368,6 +369,9 @@ export class Content extends Ion {
}
}
/**
* @private
*/
clearScrollPaddingFocusOut() {
if (!this._inputPolling) {
this._inputPolling = true;

11
ionic/components/nav/test/basic/index.ts
View File

@@ -1,5 +1,5 @@
import {Component, Type} from 'angular2/core';
import {App, NavController, Alert} from 'ionic-angular';
import {Component, Type, ViewChild} from 'angular2/core';
import {App, NavController, Alert, Content} from 'ionic-angular';
import {Page, Config, IonicApp} from 'ionic-angular';
import {NavParams, ViewController, IONIC_DIRECTIVES} from 'ionic-angular';;
@@ -49,8 +49,8 @@ class MyCmpTest{}
<button ion-item (click)="quickPush()">New push during transition</button>
<button ion-item (click)="quickPop()">New pop during transition</button>
<button ion-item (click)="reload()">Reload</button>
<button *ngFor="#i of pages" ion-item (click)="pushPrimaryHeaderPage()">Page {{i}}</button>
<button ion-item (click)="content.scrollToTop()">Scroll to top</button>
</ion-list>
<my-cmp></my-cmp>
</ion-content>`,
@@ -60,6 +60,7 @@ class FirstPage {
pushPage;
title = 'First Page';
pages: Array<number> = [];
@ViewChild(Content) content: Content;
constructor(
private nav: NavController,
@@ -117,6 +118,10 @@ class FirstPage {
reload() {
window.location.reload();
}
scrollToTop() {
this.content.scrollToTop();
}
}