Content

Improve this doc

The Content component provides an easy to use content area with some useful methods to control the scrollable area.

The content area can also implement pull-to-refresh with the Refresher component.

Component

selector: ion-content

Usage

<ion-content>
  Add your content here!
</ion-content>

To get a reference to the content component from a Page's logic, you can use Angular's @ViewChild annotation:

import {ViewChild} from 'angular2/core';
import {Content} from 'ionic-angular';

@Page({...}
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    this.content.scrollToTop();
  }
}

Instance Members

scrollTo(x, y, duration)

Scroll to the specified position.

import {ViewChild} from 'angular2/core';
import {Content} from 'ionic-angular';

@Page({
  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);
  }
}

scrollToTop(duration)

Scroll to the top of the content component.

import {ViewChild} from 'angular2/core';
import {Content} from 'ionic-angular';

@Page({
  template: `<ion-content>
               <button (click)="scrollToTop()">Scroll to top</button>
             </ion-content>`
)}
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    this.content.scrollToTop();
  }
}

getScrollTop()

Get the scrollTop property of the content’s scrollable element.

setScrollTop(top)

Set the scrollTop property of the content’s scrollable element.

scrollToBottom(duration)

Scroll to the bottom of the content component.

getContentDimensions()

Returns the content and scroll elements’ dimensions.