Header
ion-header
ion-headerHeader is a parent component that holds the navbar and toolbar component.
It's important to note that ion-header needs to be the one of the three root elements of a page
Usage
<ion-header>
<ion-navbar>
<ion-title>Page1</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-title>Subheader</ion-title>
</ion-toolbar>
</ion-header>
<ion-content></ion-content>
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 |