e8cf9927cc
- adds examples of the new way to achieve this in the e2e tests - updates breaking change to document the new slots properly and with examples - removes the first-child margin on buttons in toolbar - removes the margin on ion-buttons closes #14172
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