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は、どのプラットフォームのスタイルを使用するかを決定します。 This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| 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.