跳到主要内容
版本:v8

ion-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" | 未定义
默认值未定义

mode

描述模式决定使用哪个平台样式。
属性mode
类型"ios" | "md"
默认值未定义

translucent

描述如果为 true,页脚将为半透明。仅当模式为 "ios" 并且设备支持 backdrop-filter 时才会应用。

注意:为了在页脚后面滚动内容,需要在内容上设置 fullscreen 属性。
属性translucent
类型布尔值
默认值false

事件

此组件没有可用事件。

方法

此组件没有公开方法。

CSS 阴影部分

此组件没有 CSS 阴影部分。

CSS 自定义属性

此组件没有 CSS 自定义属性。

插槽

此组件没有插槽。