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.
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 ContentBy 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.
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.
The fixedSlotPlacement property is used to determine if content in the fixed slot is placed before or after the main content in the DOM. When set to before, fixed slot content will be placed before the main content and will therefore receive keyboard focus before the main content receives keyboard focus. This can be useful when the main content contains an infinitely-scrolling list, preventing a FAB or other fixed content from being reachable by pressing the tab key.
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 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 messages will appear here when logged from the example above.
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);
}
interface ScrollBaseDetail {
isScrolling: boolean;
}
interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
scrollTop: number;
scrollLeft: number;
}
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;
}
While not required, this interface can be used in place of the CustomEvent interface for stronger typing on the ionScroll event.
interface ScrollCustomEvent extends ScrollBaseCustomEvent {
detail: ScrollDetail;
}
"primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. Attribute color Type "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined Default undefined fixedSlotPlacement Description Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to 'before'. Attribute fixed-slot-placement Type "after" ｜ "before" Default 'after' forceOverscroll Description If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting. Attribute force-overscroll Type boolean ｜ undefined Default undefined fullscreen Description If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. 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 true. 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 true. 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 false. Attribute scroll-y Type boolean Default true Name Description Bubbles ionScroll Emitted while scrolling. This event is disabled by default. Set scrollEvents to true to enable. true ionScrollEnd Emitted when the scroll has ended. This event is disabled by default. Set scrollEvents to true to enable. true ionScrollStart Emitted when the scroll has started. This event is disabled by default. Set scrollEvents to true to enable. true getScrollElement Description Get the element where the actual scrolling takes place. This element can be used to subscribe to scroll events or manually modify scrollTop. However, it's recommended to use the API provided by ion-content:
i.e. Using ionScroll, ionScrollStart, ionScrollEnd for scrolling events and scrollToPoint() to scroll the content into a certain point.
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> Parameters x: The amount to scroll by on the horizontal axis.
scrollToBottom(duration?: number) => Promise<void> Parameters duration: The amount of time to take scrolling to the bottom. Defaults to 0. scrollToPoint Description Scroll to a specified X/Y location in the component. Signature scrollToPoint(x: number ｜ undefined ｜ null, y: number ｜ undefined ｜ null, duration?: number) => Promise<void> Parameters x: The point to scroll to on the horizontal axis.
0. scrollToTop Description Scroll to the top of the component. Signature scrollToTop(duration?: number) => Promise<void> Parameters duration: The amount of time to take scrolling to the top. Defaults to 0. Name Description background The background of the content. scroll The scrollable container of the content. 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 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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4