ion-content
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
Usage
<ion-content
[scrollEvents]="true"
(ionScrollStart)="logScrollStart()"
(ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()">
</ion-content><ion-content></ion-content>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'));import React from 'react';
import { IonContent } from '@ionic/react';
const ContentExample: React.FC = () => (
<IonContent
scrollEvents={true}
onIonScrollStart={() => {}}
onIonScroll={() => {}}
onIonScrollEnd={() => {}}>
</IonContent>
);<template>
<ion-content
:scrollEvents="true"
@ionScrollStart="logScrollStart()"
@ionScroll="logScrolling($event)"
@ionScrollEnd="logScrollEnd()">
</ion-content>
</template>Properties
color | |
|---|---|
| Description | The color to use from your application's color palette.
Default options are:
|
| Attribute | color |
| Type | string | undefined |
forceOverscroll | |
| Description | If |
| Attribute | force-overscroll |
| Type | boolean | undefined |
fullscreen | |
| Description | If |
| Attribute | fullscreen |
| Type | boolean |
| Default | false |
scrollEvents | |
| Description | Because of performance reasons, ionScroll events are disabled by default, in order to enable them
and start listening from (ionScroll), set this property to
|
| Attribute | scroll-events |
| Type | boolean |
| Default | false |
scrollX | |
| Description | If you want to enable the content scrolling in the X axis, set this property to |
| Attribute | scroll-x |
| Type | boolean |
| Default | false |
scrollY | |
| Description | If you want to disable the content scrolling in the Y axis, set this property to |
| Attribute | scroll-y |
| Type | boolean |
| Default | true |
Events
| Name | Description |
|---|---|
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 | |
|---|---|
| Description | Get the element where the actual scrolling takes place.
This element can be used to subscribe to
i.e. Using |
| Signature | getScrollElement() => Promise<HTMLElement> |
scrollByPoint | |
| Description | Scroll by a specified X/Y distance in the component. |
| Signature | scrollByPoint(x: number, y: number, duration: number) => Promise<void> |
scrollToBottom | |
| Description | Scroll to the bottom of the component. |
| Signature | scrollToBottom(duration?: number) => Promise<void> |
scrollToPoint | |
| Description | Scroll to a specified X/Y location in the component. |
| Signature | scrollToPoint(x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise<void> |
scrollToTop | |
| Description | Scroll to the top of the component. |
| Signature | scrollToTop(duration?: number) => Promise<void> |
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 | Bottom padding of the content |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content |
--padding-top | Top padding of the content |
Slots
| Name | Description |
|---|---|
| Content is placed in the scrollable area if provided without a slot. | |
"fixed" | Should be used for fixed content that should not scroll. |