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

<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>

JAVASCRIPT

<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>

REACT

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>

</>

);

STENCIL

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>

];

}

}

VUE

<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