Skip to main content
Version: v7

ion-footer

Footer is a root component of a page that aligns itself to the bottom of the page. It is recommended to be used as a wrapper for one or more toolbars, but it can be used to wrap any element. When a toolbar is used inside of a footer, the content will be adjusted so it is sized correctly, and the footer will account for any device safe areas.

Basic Usage

Footers can match the transparency found in native iOS applications by setting the translucent property. In order to see the content scrolling behind the footer, the fullscreen property needs to be set on the content. This effect will only apply when the mode is "ios" and the device supports backdrop-filter.

Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the collapse property on the footer to "fade". When the content is scrolled to the end, the background and border on the footer will fade away. This effect will only apply when the mode is "ios".

Usage with Virtual Scroll

A fade footer requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the .ion-content-scroll-host class needs to be added to the element responsible for scrolling.

Borders

In "md" mode, the footer will have a box-shadow on the top. In "ios" mode, it will receive a border on the top. These can be removed by adding the .ion-no-border class to the footer.

Properties

collapse

DescriptionDescribes the scroll effect that will be applied to the footer. Only applies in iOS mode.
Attributecollapse
Type"fade" | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

translucent

DescriptionIf true, the footer will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.

Note: In order to scroll content behind the footer, the fullscreen attribute needs to be set on the content.
Attributetranslucent
Typeboolean
Defaultfalse

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.