ion-footer
页脚是页面的根组件，它与页面底部对齐。建议用作一个或多个 toolbars 的封装器，但它可以用于封装任何元素。当在页脚内部使用工具栏时，将调整内容以使其大小正确，并且页脚将考虑任何设备安全区域。
¥Footer is a root component of a page that aligns itself to the bottom of the page. It is recommended to be used as a wrapper for one or more toolbars, but it can be used to wrap any element. When a toolbar is used inside of a footer, the content will be adjusted so it is sized correctly, and the footer will account for any device safe areas.
基本用法
¥Basic Usage
半透明页脚
¥Translucent Footer
通过设置 translucent 属性，页脚可以匹配原生 iOS 应用中的透明度。为了看到页脚后面滚动的内容，需要在内容上设置 fullscreen 属性。仅当模式为 "ios" 并且设备支持 backdrop-filter 时，此效果才会生效。
¥Footers can match the transparency found in native iOS applications by setting the translucent property. In order to see the content scrolling behind the footer, the fullscreen property needs to be set on the content. This effect will only apply when the mode is "ios" and the device supports backdrop-filter.
淡入页脚
¥Fade Footer
许多原生 iOS 应用的工具栏上都有淡入淡出效果。这可以通过将页脚上的 collapse 属性设置为 "fade" 来实现。当内容滚动到末尾时，页脚的背景和边框将会消失。该效果仅在模式为 "ios" 时有效。
¥Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the collapse property on the footer to "fade". When the content is scrolled to the end, the background and border on the footer will fade away. This effect will only apply when the mode is "ios".
与虚拟滚动一起使用
¥Usage with Virtual Scroll
淡入淡出页脚需要滚动容器才能正常工作。使用虚拟滚动解决方案时，需要提供自定义滚动目标。需要禁用内容滚动，并且需要将 .ion-content-scroll-host 类添加到负责滚动的元素中。
¥A fade footer requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the .ion-content-scroll-host class needs to be added to the element responsible for scrolling.
边框
¥Borders
在 "md" 模式下，页脚顶部将有一个 box-shadow。在 "ios" 模式下，它的顶部会显示 border。可以通过将 .ion-no-border 类添加到页脚来删除它们。
¥In "md" mode, the footer will have a box-shadow on the top. In "ios" mode, it will receive a border on the top. These can be removed by adding the .ion-no-border class to the footer.
属性
¥Properties
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. |
| 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 |
事件
¥Events
No events available for this component.
方法
¥Methods
No public methods available for this component.
CSS 阴影部分
¥CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
¥CSS Custom Properties
No CSS custom properties available for this component.
插槽
¥Slots
No slots available for this component.