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

docs(content): update docs

Browse Source
This commit is contained in:
mhartington
2016-08-05 10:00:22 -04:00
parent 5cb9d65146
commit 0579bbafc9
1 changed files with 55 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/components/content/content.ts
View File

@ -44,6 +44,61 @@ import { isTrueProperty } from '../../util/util';
* } * }
* ``` * ```
* *
* @advanced
*
* Resizing the content
*
*
* ```ts
* @Component({
* template: `
* <ion-header>
* <ion-navbar>
* <ion-title>Main Navbar</ion-title>
* </ion-navbar>
* <ion-toolbar *ngIf="showToolbar">
* <ion-title>Dynamic Toolbar</ion-title>
* </ion-toolbar>
* </ion-header>
* <ion-content>
* <button (click)="toggleToolbar()">Toggle Toolbar</button>
* </ion-content>
* `})
*
* class E2EPage {
* @ViewChild(Content) content: Content;
* showToolbar: boolean = false;
*
* toggleToolbar() {
* this.showToolbar = !this.showToolbar;
* this.content.resize();
* }
* }
* ```
*
*
* Scroll to a specific position
*
* ```ts
* import { Component, ViewChild } from '@angular/core';
* import { Content } from 'ionic-angular';
*
* @Component({
* template: `<ion-content>
* <button (click)="scrollTo()">Down 500px</button>
* </ion-content>`
* )}
* export class MyPage{
* @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);
* }
* }
* ```
*
*/ */
@Component({ @Component({
selector: 'ion-content', selector: 'ion-content',
@ -244,25 +299,6 @@ export class Content extends Ion {
/** /**
* Scroll to the specified position. * Scroll to the specified position.
* *
* ```ts
* import { Component, ViewChild } from '@angular/core';
* import { Content } from 'ionic-angular';
*
* @Component({
* template: `<ion-content>
* <button (click)="scrollTo()">Down 500px</button>
* </ion-content>`
* )}
* export class MyPage{
* @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);
* }
* }
* ```
* @param {number} x The x-value to scroll to. * @param {number} x The x-value to scroll to.
* @param {number} y The y-value to scroll to. * @param {number} y The y-value to scroll to.
* @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`. * @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`.
@ -275,23 +311,6 @@ export class Content extends Ion {
/** /**
* Scroll to the top of the content component. * Scroll to the top of the content component.
* *
* ```ts
* import { Component, ViewChild } from '@angular/core';
* import { Content } from 'ionic-angular';
*
* @Component({
* template: `<ion-content>
* <button (click)="scrollToTop()">Scroll to top</button>
* </ion-content>`
* )}
* export class MyPage{
* @ViewChild(Content) content: Content;
*
* scrollToTop() {
* this.content.scrollToTop();
* }
* }
* ```
* @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`. * @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. * @returns {Promise} Returns a promise which is resolved when the scroll has completed.
*/ */
@ -446,33 +465,6 @@ export class Content extends Ion {
* Tell the content to recalculate its dimensions. This should be called * Tell the content to recalculate its dimensions. This should be called
* after dynamically adding headers, footers, or tabs. * after dynamically adding headers, footers, or tabs.
* *
* ```ts
* @Component({
* template: `
* <ion-header>
* <ion-navbar>
* <ion-title>Main Navbar</ion-title>
* </ion-navbar>
* <ion-toolbar *ngIf="showToolbar">
* <ion-title>Dynamic Toolbar</ion-title>
* </ion-toolbar>
* </ion-header>
* <ion-content>
* <button (click)="toggleToolbar()">Toggle Toolbar</button>
* </ion-content>
* `})
*
* class E2EPage {
* @ViewChild(Content) content: Content;
* showToolbar: boolean = false;
*
* toggleToolbar() {
* this.showToolbar = !this.showToolbar;
* this.content.resize();
* }
* }
* ```
*
*/ */
resize() { resize() {
nativeRaf(() => { nativeRaf(() => {