ion-footer
页脚是页面的根组件，会对齐到页面底部。建议将其用作一个或多个工具栏的封装器，但它也可以用于封装任何元素。当工具栏在页脚内部使用时，内容将会被调整以正确设置大小，页脚也会考虑任何设备的安全区域。
🌐 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. 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 |
事件
🌐 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.