Skip to main content

ion-content

View Source

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

Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the CSS Utilities or by individually styling it using CSS and the available CSS Custom Properties.

Fixed Content#

In order to place elements outside of the scrollable area, slot="fixed" can be added to the element. This will absolutely position the element placing it in the top left. In order to place the element in a different position, style it using top, right, bottom, and left.

Usage#

<ion-content
[scrollEvents]="true"
(ionScrollStart)="logScrollStart()"
(ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()">
<h1>Main Content</h1>
<div slot="fixed">
<h1>Fixed Content</h1>
</div>
</ion-content>

Properties#

color#

DescriptionThe 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.
Attributecolor
Typestring \| undefined
Defaultundefined

forceOverscroll#

DescriptionIf 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.
Attributeforce-overscroll
Typeboolean \| undefined
Defaultundefined

fullscreen#

DescriptionIf true, the content will scroll behind the headers
and footers. This effect can easily be seen by setting the toolbar
to transparent.
Attributefullscreen
Typeboolean
Defaultfalse

scrollEvents#

DescriptionBecause of performance reasons, ionScroll events are disabled by default, in order to enable them
and start listening from (ionScroll), set this property to true.
Attributescroll-events
Typeboolean
Defaultfalse

scrollX#

DescriptionIf you want to enable the content scrolling in the X axis, set this property to true.
Attributescroll-x
Typeboolean
Defaultfalse

scrollY#

DescriptionIf you want to disable the content scrolling in the Y axis, set this property to false.
Attributescroll-y
Typeboolean
Defaulttrue

Events#

NameDescription
ionScrollEmitted while scrolling. This event is disabled by default.
Look at the property: scrollEvents
ionScrollEndEmitted when the scroll has ended.
ionScrollStartEmitted when the scroll has started.

Methods#

getScrollElement#

DescriptionGet the element where the actual scrolling takes place.
This element can be used to subscribe to scroll events or manually modify
scrollTop. However, it's recommended to use the API provided by ion-content:

i.e. Using ionScroll, ionScrollStart, ionScrollEnd for scrolling events
and scrollToPoint() to scroll the content into a certain point.
SignaturegetScrollElement() => Promise<HTMLElement>

scrollByPoint#

DescriptionScroll by a specified X/Y distance in the component.
SignaturescrollByPoint(x: number, y: number, duration: number) => Promise<void>

scrollToBottom#

DescriptionScroll to the bottom of the component.
SignaturescrollToBottom(duration?: number) => Promise<void>

scrollToPoint#

DescriptionScroll to a specified X/Y location in the component.
SignaturescrollToPoint(x: number \| undefined \| null, y: number \| undefined \| null, duration?: number) => Promise<void>

scrollToTop#

DescriptionScroll to the top of the component.
SignaturescrollToTop(duration?: number) => Promise<void>

CSS Shadow Parts#

NameDescription
backgroundThe background of the content.
scrollThe scrollable container of the content.

CSS Custom Properties#

NameDescription
--backgroundBackground of the content
--colorColor of the content
--keyboard-offsetKeyboard offset of the content
--offset-bottomOffset bottom of the content
--offset-topOffset top of the content
--padding-bottomBottom padding of the content
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the content
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the content
--padding-topTop padding of the content

Slots#

NameDescription
``Content is placed in the scrollable area if provided without a slot.
fixedShould be used for fixed content that should not scroll.