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 |