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 自定义属性。
插槽
此组件没有插槽。