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
CSS Utilities or by individually styling it using CSS and the available
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. |