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

ion-footer

Contents

Footerは、ページの最下部にあるページのルートコンポーネントです。 Footerは、コンテンツ領域が正しくサイズ設定されていることを確認するために、ion-toolbar のラッパーとして使用できます。

The collapse property can be set to 'fade' on a page's ion-footer to have the background color of the toolbars fade in as users scroll. This provides the same fade effect that is found in many native iOS applications.

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>

<!-- Fade Footer -->
<ion-footer collapse="fade">
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-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