ion-footer
Footer is a root component of a page that sits at the bottom of the page. Footer can be a wrapper for ion-toolbar to make sure the content area is sized correctly.
Usage
- Angular
- Javascript
- React
- Stencil
- Vue
<ion-content></ion-content>
<!-- Footer without a border -->
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
<ion-content></ion-content>
<!-- Footer without a border -->
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
import React from 'react';
import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
export const FooterExample: React.FC = () => (
<>
<IonContent />
{/*-- Footer without a border --*/}
<IonFooter className="ion-no-border">
<IonToolbar>
<IonTitle>Footer - No Border</IonTitle>
</IonToolbar>
</IonFooter>
<IonFooter>
<IonToolbar>
<IonTitle>Footer</IonTitle>
</IonToolbar>
</IonFooter>
</>
);
import { Component, h } from '@stencil/core';
@Component({
tag: 'footer-example',
styleUrl: 'footer-example.css',
})
export class FooterExample {
render() {
return [
<ion-content></ion-content>,
// Footer without a border
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>,
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>,
];
}
}
<template>
<ion-content></ion-content>
<!-- Footer without a border -->
<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-title>Footer - No Border</ion-title>
</ion-toolbar>
</ion-footer>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</template>
<script>
import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonContent, IonFooter, IonTitle, IonToolbar },
});
</script>
Properties
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 Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.