本文へスキップ
バージョン: v8

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​

説明フッターに適用されるスクロール効果を記述します。iOSモードでのみ適用されます。
属性collapse
型"fade"｜undefined
デフォルトundefined

mode​

説明モードは、使用するプラットフォームスタイルを決定します。
属性mode
型"ios"｜"md"
デフォルトundefined

translucent​

説明trueの場合、フッターは透過になります。モードが"ios"であり、デバイスがbackdrop-filterをサポートしている場合にのみ適用されます。

注: フッターの後ろにコンテンツをスクロールするには、コンテンツでfullscreen属性を設定する必要があります。
属性translucent
型boolean
デフォルトfalse

イベント​

このコンポーネントで使用可能なイベントはありません。

メソッド​

このコンポーネントで使用可能な公開メソッドはありません。

CSSシャドウパーツ​

このコンポーネントで使用可能なCSSシャドウパーツはありません。

CSSカスタムプロパティ​

このコンポーネントで使用可能なCSSカスタムプロパティはありません。

スロット​

このコンポーネントで使用可能なスロットはありません。

目次

このページを編集