页面底部栏组件
底部栏是页面的根组件，它将自己对齐到页面底部。建议将其用作一个或多个 工具栏 的包装器，但也可以用于包装任何元素。当在底部栏内部使用工具栏时，内容将被调整以确保尺寸正确，并且底部栏会考虑任何设备安全区域。
基本用法
半透明底部栏
通过设置 translucent 属性，底部栏可以匹配原生 iOS 应用程序中的透明度效果。为了看到内容在底部栏后面滚动，需要在内容上设置 fullscreen 属性。此效果仅在模式为 "ios" 且设备支持 背景滤镜 时适用。
淡出式底部栏
许多原生 iOS 应用程序在工具栏上具有淡出效果。这可以通过将底部栏的 collapse 属性设置为 "fade" 来实现。当内容滚动到底部时，底部栏的背景和边框会逐渐淡出。此效果仅在模式为 "ios" 时适用。
与虚拟滚动结合使用
淡出式底部栏需要一个滚动容器才能正常工作。当使用虚拟滚动解决方案时，需要提供一个自定义的滚动目标。需要禁用内容上的滚动，并且将 .ion-content-scroll-host 类添加到负责滚动的元素上。
边框
在 "md" 模式下，底部栏的顶部会有一个 box-shadow。在 "ios" 模式下，它的顶部会有一条 border。可以通过向底部栏添加 .ion-no-border 类来移除这些边框。
属性
collapse
| Description | Describes the scroll effect that will be applied to the footer. Only applies in iOS mode. |
| Attribute | collapse |
| Type | "fade" ｜ undefined |
| Default | undefined |
mode
| Description | The mode determines which platform styles to use. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
translucent
| Description | 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. |
| Attribute | translucent |
| Type | boolean |
| Default | false |
事件
No events available for this component.
方法
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
No CSS custom properties available for this component.
插槽
No slots available for this component.