Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Footer

ion-footer

Improve this doc

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

<ion-content></ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

Sass Variables

Property Default Description
$toolbar-order-ios ( back-button: 0, menu-toggle-start: 1, buttons-left: 2, buttons-start: 3, content: 4, buttons-end: 5, buttons-right: 6, menu-toggle-end: 7, )

Order of the toolbar elements

$toolbar-ios-button-font-size 1.7rem

Font size of the toolbar button

$toolbar-ios-title-font-size 1.7rem

Font size of the toolbar title

$toolbar-ios-title-font-weight 600

Font weight of the toolbar title

$toolbar-ios-title-text-align center

Text alignment of the toolbar title

$toolbar-ios-title-text-color color-contrast($colors-ios, $toolbar-ios-background)

Text color of the toolbar title

$toolbar-ios-button-color color-contrast($colors-ios, $toolbar-ios-background, ios)

Text color of the toolbar button

$toolbar-ios-button-border-radius 4px

Border radius of the toolbar button

$toolbar-ios-button-strong-font-weight 600

Font weight of the strong toolbar button

$navbar-ios-height $toolbar-ios-height

Height of the navigation bar

Property Default Description
$toolbar-order-md ( back-button: 0, menu-toggle-start: 1, buttons-left: 2, content: 3, buttons-start: 4, buttons-end: 5, buttons-right: 6, menu-toggle-end: 7, )

Order of the toolbar elements

$toolbar-md-title-font-size 2rem

Font size of the toolbar title

$toolbar-md-title-text-color color-contrast($colors-md, $toolbar-md-background, md)

Text color of the toolbar title

$toolbar-md-button-font-size 1.4rem

Font size of the toolbar button

$toolbar-md-button-color $toolbar-md-title-text-color

Text color of the toolbar button

$toolbar-md-button-border-radius 2px

Border radius of the toolbar button

$toolbar-md-button-strong-font-weight bold

Font weight of the strong toolbar button

$navbar-md-height $toolbar-md-height

Height of the navigation bar

Property Default Description
$toolbar-order-wp ( back-button: 0, menu-toggle-start: 1, buttons-left: 2, content: 3, buttons-start: 4, buttons-end: 5, buttons-right: 6, menu-toggle-end: 7, )

Order of the toolbar elements

$toolbar-wp-title-padding 0 6px

Padding of the toolbar title

$toolbar-wp-title-font-size 1.5rem

Font size of the toolbar title

$toolbar-wp-title-font-weight bold

Font weight of the toolbar title

$toolbar-wp-title-text-transform uppercase

Text transform of the toolbar title

$toolbar-wp-title-text-color color-contrast($colors-wp, $toolbar-wp-background, wp)

Text color of the toolbar title

$toolbar-wp-button-font-size 1.4rem

Font size of the toolbar button

$toolbar-wp-button-color color-contrast($colors-wp, $toolbar-wp-background, wp)

Text color of the toolbar button

$toolbar-wp-button-border-radius 2px

Border radius of the toolbar button

$toolbar-wp-button-strong-font-weight bold

Font weight of the strong toolbar button

$navbar-wp-height $toolbar-wp-height

Height of the navigation bar

API

Native

General