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

ion-footer

コンテンツ

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

フェードフッター

ページの ion-footercollapse プロパティを 'fade' に設定すると、ユーザがスクロールするたびにツールバーの背景色がフェードインしていくようになります。これは、多くのネイティブ iOS アプリケーションで見られるのと同じフェード効果を提供します。

仮想スクロールでの使用方法

フェードフッターを機能させるには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、ion-content のスクロールを無効にし、.ion-content-scroll-host クラスターゲットで、どの要素コンテナがスクロールコンテナを担当するのかを指定する必要があります。

<ion-content scroll-y="false">
<virtual-scroll-element class="ion-content-scroll-host">
<!-- Your virtual scroll content -->
</virtual-scroll-element>
</ion-content>
<ion-footer collapse="fade">
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>

使い方

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

プロパティ

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

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.