Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Content

ion-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.

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 { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

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

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

Instance Members

contentHeight

Content height of the viewable area. This does not include content which is outside the overflow area, or content area which is under headers and footers. Read-only.

Returns: number

contentWidth

Content width including content which is not visible on the screen due to overflow. Read-only.

Returns: number

contentTop

A number representing how many pixels the top of the content has been adjusted, which could be by either padding or margin. This adjustment is to account for the space needed for the header.

Returns: number

contentBottom

A number representing how many pixels the bottom of the content has been adjusted, which could be by either padding or margin. This adjustment is to account for the space needed for the footer.

Returns: number

scrollHeight

Content height including content which is not visible on the screen due to overflow. Read-only.

Returns: number

scrollWidth

Content width including content which is not visible due to overflow. Read-only.

Returns: number

scrollToptop

The distance of the content’s top to its topmost visible content.

Param Type Details
top number
Returns: number

scrollLefttop

The distance of the content’s left to its leftmost visible content.

Param Type Details
top number
Returns: number

isScrolling

If the content is actively scrolling or not.

Returns: boolean

directionY

The current, or last known, vertical scroll direction. Possible string values include down and up.

Returns: string

directionX

The current, or last known, horizontal scroll direction. Possible string values include right and left.

Returns: string

scrollTo(x, y, duration)

Scroll to the specified position.

Param Type Details
x number

The x-value to scroll to.

y number

The y-value to scroll to.

duration number

Duration of the scroll animation in milliseconds. Defaults to 300.Optional

Returns: Promise

Returns a promise which is resolved when the scroll has completed.

scrollToTop(duration)

Scroll to the top of the content component.

Param Type Details
duration number

Duration of the scroll animation in milliseconds. Defaults to 300.Optional

Returns: Promise

Returns a promise which is resolved when the scroll has completed.

scrollToBottom(duration)

Scroll to the bottom of the content component.

Param Type Details
duration number

Duration of the scroll animation in milliseconds. Defaults to 300.Optional

Returns: Promise

Returns a promise which is resolved when the scroll has completed.

getContentDimensions()

Returns the content and scroll elements’ dimensions.

Returns: object

dimensions The content and scroll elements' dimensions

Property Type Details
dimensions.contentHeight number

content offsetHeight

dimensions.contentTop number

content offsetTop

dimensions.contentBottom number

content offsetTop+offsetHeight

dimensions.contentWidth number

content offsetWidth

dimensions.contentLeft number

content offsetLeft

dimensions.contentRight number

content offsetLeft + offsetWidth

dimensions.scrollHeight number

scroll scrollHeight

dimensions.scrollTop number

scroll scrollTop

dimensions.scrollBottom number

scroll scrollTop + scrollHeight

dimensions.scrollWidth number

scroll scrollWidth

dimensions.scrollLeft number

scroll scrollLeft

dimensions.scrollRight number

scroll scrollLeft + scrollWidth

resize()

Tell the content to recalculate its dimensions. This should be called after dynamically adding headers, footers, or tabs.

Input Properties

Attr Type Details
fullscreen boolean

By default, content is positioned between the headers and footers. However, using fullscreen="true", the content will be able to scroll "under" the headers and footers. At first glance the fullscreen option may not look any different than the default, however, by adding a transparency effect to a header then the content can be seen under the header as the user scrolls.

@returns {boolean}

@param {boolean} val

Output Events

Attr Details
ionScrollStart

Emitted when the scrolling first starts.

ionScroll

Emitted on every scroll event.

ionScrollEnd

Emitted when scrolling ends.

Advanced

Resizing the content

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

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
  template: `<ion-content>
               <button ion-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);
  }
}

Sass Variables

iOS

Property Default Description
$content-ios-outer-background #efeff4

Background color of the outer content

$content-ios-transition-background #000

Background color of the content when making transition

API

Native

General