ion-footer
フッターは、ページの下部に配置されるページのルートコンポーネントです。1つ以上の ツールバー のラッパーとして使用することが推奨されますが、あらゆる要素をラップするために使用することができます。ツールバーがフッターの中で使用される場合、コンテンツは正しいサイズに調整され、フッターはデバイスセーフエリアを考慮したものになります。
Basic Usage
Translucent Footer
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.
フェードフッター
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".
仮想スクロールでの使用方法
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
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.
プロパティ
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 |
イベント
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.
Slots
No slots available for this component.