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 CSS Custom Properties.
Basic Usage
Header & Footer
Content can be the only top-level component in a page, or it can be used alongside a header, footer, or both. When used with a header or footer, it will adjust its size to fill the remaining height.
Fullscreen Content
By default, content fills the space between a header and footer but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the translucent
property is set on either of them, or opacity
is set on the toolbar. This can be achieved by setting the fullscreen
property on the content to true
.
Fixed Content
To place elements outside of the scrollable area, assign them to the fixed
slot. Doing so will absolutely position the element to the top left of the content. In order to change the position of the element, it can be styled using the top, right, bottom, and left CSS properties.
Scroll Methods
Content provides methods that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a duration
in order to smoothly transition instead of instantly changing the position.
Scroll Events
Scroll events are disabled by default for content due to performance. However, they can be enabled by setting scrollEvents
to true
. This is necessary before listening to any of the scroll events.
Console
Console messages will appear here when logged from the example above.
Theming
Colors
CSS Shadow Parts
CSS Custom Properties
Safe Area Padding
The content component will not automatically apply padding to any of its sides to account for the safe area. This is because the content component is often used in conjunction with other components that apply their own padding, such as headers and footers. However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the --ion-safe-area-(dir)
variables described in Application Variables.
The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the padding-top
property to the value of the --ion-safe-area-top
variable.
ion-content::part(scroll) {
padding-top: var(--ion-safe-area-top, 0);
}
Another common use case is to apply padding to the left side of the content to account for the notch when the device is in landscape mode and the notch is on the left side. This can be done by setting the padding-left
property to the value of the --ion-safe-area-left
variable.
ion-content::part(scroll) {
padding-left: var(--ion-safe-area-left, 0);
}
Interfaces
ScrollBaseDetail
interface ScrollBaseDetail {
isScrolling: boolean;
}
ScrollDetail
interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
scrollTop: number;
scrollLeft: number;
}
ScrollBaseCustomEvent
While not required, this interface can be used in place of the CustomEvent
interface for stronger typing on the ionScrollStart
and ionScrollEnd
events.
interface ScrollBaseCustomEvent extends CustomEvent {
detail: ScrollBaseDetail;
target: HTMLIonContentElement;
}