跳到主要内容
版本:v7

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​

说明Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.
属性collapse
类型"fade" | undefined
默认值undefined

mode​

说明The mode determines which platform styles to use.

这是一个虚拟属性,在初始化时设置一次,之后更改其值不会更新组件。
属性mode
类型"ios" | "md"
默认值undefined

translucent​

说明If true, the footer will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.

Note: In order to scroll content behind the footer, the fullscreen attribute needs to be set on the content.
属性translucent
类型boolean
默认值false

事件​

该组件没有可用的事件。

方法​

该组件没有可用的公共方法。

CSS 阴影部分​

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性​

该组件没有可用的 CSS 自定义属性。

插槽​

该组件没有可用的插槽。