147a6090e4
* Cleanup for iOS mode used in material variables Refactor to alpha variables for colors in the color map updated theme builder with new alpha variables updated theme builder with duplicate default CSS modes * moved alpha transform into css-var removed ion-color-alpha fixes for disabled css-variable mode added defaults for user configurable variables * revert to spinner related code
ion-toolbar
A Toolbar is a generic bar that is positioned above or below content.
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 mode. |
end |
Positions element to the right of the content in ios mode, and to the far right in md 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>
<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>
Properties
color
string
The color to use from your Sass $colors map.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For more information, see Theming your App.
mode
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
For more information, see Platform Styles.
translucent
boolean
If true, the toolbar will be translucent.
Note: In order to scroll content behind the toolbar, the fullscreen
attribute needs to be set on the content.
Defaults to false.
Attributes
color
string
The color to use from your Sass $colors map.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For more information, see Theming your App.
mode
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
For more information, see Platform Styles.
translucent
boolean
If true, the toolbar will be translucent.
Note: In order to scroll content behind the toolbar, the fullscreen
attribute needs to be set on the content.
Defaults to false.
Built with StencilJS