メインコンテンツまでスキップ
Version: v5

ion-footer

Footer is a root component of a page that sits at the bottom of the page. Footer can be a wrapper for ion-toolbar to make sure the content area is sized correctly.

Usage

<ion-content></ion-content>

<!-- Footer without a border -->
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>

<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>

Properties

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