Ionic CSS - 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.

App (ion-app)

App is a container element for an Ionic application. There should only be one <ion-app> element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the <ion-app> when they are presented.

 

Content (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 component.

<ion-content
  [scrollEvents]="true"
  (ionScrollStart)="logScrollStart()"
  (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()">
</ion-content>

 

Properties

  • color
    • Description:The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". 
    • Attribute: color
    • Type: string | undefined
  • 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, the does not disable the system bounce on iOS. That is an OS level setting.
    • Attribute: force-overscroll
    • Type: boolean | undefine
  • 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-event
    • 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 enable the content scrolling in the Y axis, set this property to true.
  • Attribute: scroll-Y
  • Type: boolean
  • Default: false

 

Events

  • 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 scroll events or manually modify scrollTop, however, it's recommended to use the API provided by ion-content:

      Ie. Using ionScrollionScrollStartionScrollEnd for scrolling events and scrollToPoint() to scroll the content into a certain point.

    • 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>