ion-footer

フッターは、ページの下部に配置されるページのルートコンポーネントです。1つ以上の ツールバー のラッパーとして使用することが推奨されますが、あらゆる要素をラップするために使用することができます。ツールバーがフッターの中で使用される場合、コンテンツは正しいサイズに調整され、フッターはデバイスセーフエリアを考慮したものになります。

基本的な使い方

半透明のフッター

フッターは、translucentプロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。フッターの後ろにスクロールするコンテンツを見るには、コンテンツに fullscreen プロパティを設定する必要があります。この効果は、モードが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。

フェードフッター

多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、フッターの collapse プロパティを "fade" に設定することで実現できます。コンテンツが最後までスクロールされると、フッターの背景とボーダーはフェードアウトします。この効果は、モードが "ios" のときだけ適用されます。

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

フェードフッターを正しく動作させるためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に .ion-content-scroll-host クラスを追加する必要があります。

ボーダー

"md"モードでは、フッターは上部に box-shadow が表示されます。"ios"モードでは、上部に border が表示されます。これらは、フッターに .ion-no-border クラスを追加することで削除することができます。

プロパティ

collapse

Description	Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.
Attribute	collapse
Type	"fade" ｜ undefined
Default	undefined

mode

Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

translucent

Description	If 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.
Attribute	translucent
Type	boolean
Default	false

イベント

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.