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.