跳至主要內容
版本：v8

ion-footer

Footer 是頁面的根元件，會將其自身對齊至頁面底部。建議將其用作一個或多個工具列的包裝器，但它可以用於包裝任何元素。當工具列在頁尾內部使用時，內容將會調整以使其大小正確，且頁尾將會考量任何裝置安全區域。

基本用法​

頁尾可以透過設定 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 自訂屬性。

插槽​

此元件沒有可用的插槽。

目錄

編輯此頁面