跳到主要内容
版本:v6

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 自定义属性。

插槽

该组件没有可用的插槽。