Toolbar
ion-toolbar
ion-toolbarA Toolbar is a generic bar that is positioned above or below content.
Unlike a Navbar, a toolbar can be used as a subheader.
When toolbars are placed within an <ion-header> or <ion-footer>,
the toolbars stay fixed in their respective location. When placed within
<ion-content>, toolbars will scroll with the content.
Buttons in a Toolbar
Buttons placed in a toolbar should be placed inside of the <ion-buttons>
element. An exception to this is a menuToggle button.
It should not be placed inside of the <ion-buttons> element. Both the
<ion-buttons> element and the menuToggle can be positioned inside of the
toolbar using different properties. The below chart has a description of each
property.
| Property | Description |
|---|---|
start |
Positions element to the left of the content in ios mode, and directly to the right in md and wp mode. |
end |
Positions element to the right of the content in ios mode, and to the far right in md and wp mode. |
left |
Positions element to the left of all other elements. |
right |
Positions element to the right of all other elements. |
Header / Footer Box Shadow and Border
In md mode, the <ion-header> will receive a box-shadow on the bottom, and the
<ion-footer> will receive a box-shadow on the top. In ios mode, the <ion-header>
will receive a border on the bottom, and the <ion-footer> will receive a border on the
top. Both the md box-shadow and the ios border can be removed by adding the no-border
attribute to the element.
<ion-header no-border>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
<ion-footer no-border>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
Usage
<ion-header no-border>
<ion-toolbar>
<ion-title>My Toolbar Title</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>I'm a subheader</ion-title>
</ion-toolbar>
<ion-header>
<ion-content>
<ion-toolbar>
<ion-title>Scrolls with the content</ion-title>
</ion-toolbar>
</ion-content>
<ion-footer no-border>
<ion-toolbar>
<ion-title>I'm a 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 |