Framework v4 BETA

ion-content

Open Preview

Content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view component.

Usage

angular javascript
html
<ion-content
  [scrollEvents]="true"
  (ionScrollStart)="logScrollStart()"
  (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()">
</ion-content>
html
<ion-content></ion-content>
javascript
var content = document.querySelector('ion-content');
content.scrollEvents = true;
content.addEventListener('ionScrollStart', () => console.log('scroll start'));
content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
content.addEventListener('ionScrollEnd', () => console.log('scroll end'));

Properties

color

Attribute: color Type: string | undefined
The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

forceOverscroll

Attribute: force-overscroll Type: boolean | undefined
If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.

fullscreen

Attribute: fullscreen Type: boolean
If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.

scrollEvents

Attribute: scroll-events Type: boolean
Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to true.

scrollX

Attribute: scroll-x Type: boolean
If you want to enable the content scrolling in the X axis, set this property to true.

scrollY

Attribute: scroll-y Type: boolean
If you want to disable the content scrolling in the Y axis, set this property to false.

Events

ionScroll

Emitted while scrolling. This event is disabled by default. Look at the property: scrollEvents

ionScrollEnd

Emitted when the scroll has ended.

ionScrollStart

Emitted when the scroll has started.

Methods

getScrollElement()

Returns the element where the actual scrolling takes places. This element is the one you could subscribe to scroll events or manually modify scrollTop, however, it's recommended to use the API provided by ion-content: Ie. Using ionScroll, ionScrollStart, ionScrollEnd for scrolling events and scrollToPoint() to scroll the content into a certain point.

scrollByPoint()

Scroll by a specified X/Y distance in the component

scrollToBottom()

Scroll to the bottom of the component

scrollToPoint()

Scroll to a specified X/Y location in the component

scrollToTop()

Scroll to the top of the component

CSS Custom Properties

Name Description
--background Background of the Content
--color Color of the Content
--keyboard-offset Keyboard offset of the Content
--offset-bottom Offset bottom of the Content
--offset-top Offset top of the Content
--padding-bottom Padding bottom of the Content
--padding-end Padding end of the Content
--padding-start Padding start of the Content
--padding-top Padding top of the Content