Ionic Contents
Ionic Contents
The content component provides an easy-to-use content area with some useful ways to control the scrollable region. There should be only one content in one view.
Content, along with several other Ionic elements, can be optimized to modify its padding, margin, and more by using the global styles given in the CSS Utilities or by styling them individually using the CSS and the available CSS Custom Properties.
Almost every mobile application contains some essential elements. Typically, these items include a header and footer that will cover the top and bottom of the screen. All other elements will be placed between these two. Ionic provides an element of ion-content that acts as a container that will wrap all the other elements we want to create. The given below example shows the ionic content in the Ionic application.
Example:
Ionic Content
Python is a general-purpose programming language with a high level of interpretation. The Python design philosophy, created by Guido Van Rossum and first launched in 1991, emphasizes the ease of reading the code with its remarkable use of essential spaces.
Python is written dynamically, and garbage is collected. It is compatible with multiple programming models, including procedural, object-oriented, and functional programming.
Output: When you run the given code, then you will get this output, which is shown in the screenshot.
Ionic Content Scrolling: Many types of scrolling are used in the ion-content component. Ion-Content-Scrolling is used to scroll the screen top to bottom and bottom to top with the help of the scroll button. If you want to use the ionic content scroll, then you require to enable the scroll event by setting the [scrollEvents] = "true."
- IonScrollStart: It used when the scroll started.
- IonScrollEnd: It used when the scroll ended.
Example: This example shows how you can include the scroll button in the ionic content.
Home.page.html
Content Scroll Scroll To Bottom {{ item.value }} Scroll To Top
Home.page.ts
import { Component, ViewChild } from '@angular/core';
import { IonContent, } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
@ViewChild(IonContent, {static: false}) content: IonContent;
dummyList: any;
constructor(
) {
this.dummyList = [
{
value: 'Item 0',
}, {
value: 'Item 1',
}, {
value: 'Item 2',
}, {
value: 'Item 4',
}, {
value: 'Subjects',
}, {
value: 'Fruites',
}, {
value: 'Cake',
}, {
value: 'Colddrink',
}, {
value: 'Sweets',
}, {
value: 'Food',
}, {
value: 'Movie',
}, {
value: 'Songs',
}, {
value: 'Games',
}, {
value: 'Phones',
}, {
value: 'Market',
}, {
value: 'Train',
}, {
value: 'College',
}, {
value: 'Dish',
}, {
value: 'City',
}, {
value: 'Country',
}, {
value: 'Travells',
}
];
}
logScrollStart() {
console.log('logScrollStart : Scroll Starts');
}
logScrolling() {
console.log('logScrolling : Scrolling');
}
logScrollEnd() {
console.log('logScrollEnd : Scroll Ends');
}
ScrollToBottom() {
this.content.scrollToBottom(800);
}
ScrollToTop() {
this.content.scrollToTop(800);
}
}
Output: When you run the given code, then you will get this output, which is shown in the screenshot.
When you click on the Scroll to Bottom button, then it scrolls down the page, and if you click on the Scroll to Top Button, then it goes up. The given screenshot shows the output.
