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	フッターに適用されるスクロール効果を記述します。iOS modeでのみ適用されます。
Attribute	collapse
Type	"fade" ｜ undefined
Default	undefined

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

translucent

Description	trueの場合、フッターは半透明になります。modeが "ios" で、デバイスが backdrop-filter をサポートしている場合のみ適用されます。 注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに fullscreen 属性が設定されている必要があります。
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.