ion-content
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
<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'));
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 |
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 |
scrollX | |
Description | If you want to enable the content scrolling in the X axis, set this property to |
Attribute | scroll-x |
Type | boolean |
scrollY | |
Description | If you want to disable the content scrolling in the Y axis, set this property to |
Attribute | scroll-y |
Type | boolean |
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 | Returns the element where the actual scrolling takes places.
This element is the one you could subscribe to Ie. 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 | 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 |
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. |