Footer
ion-footer
ion-footerFooter 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-top |
0 |
Padding top of the toolbar title |
$toolbar-wp-title-padding-end |
6px |
Padding end of the toolbar title |
$toolbar-wp-title-padding-bottom |
$toolbar-wp-title-padding-top |
Padding bottom of the toolbar title |
$toolbar-wp-title-padding-start |
$toolbar-wp-title-padding-end |
Padding start 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 |