Back button component for <ons-toolbar>. Put it in the left part of the <ons-toolbar>.
It will find the parent <ons-navigator> element and pop a page when clicked. This behavior can be overriden by specifying the onClick property and calling event.preventDefault in its callback.
To go back to a previous page use the <ons-back-button> element. It can be added to the left side of the toolbar and renders as an arrow:
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
</ons-toolbar>
It will automatically find the Navigator element and trigger a popPage() call so there is no need to attach any click handlers to it.
The popPage() method of <ons-navigator> can also be used directly instead of <ons-back-button>.
The onClick DOM property is available to modify the default behavior of ons-back-button:
document.querySelector('ons-back-button').onClick = function(event) {
// Reset the whole stack instead of popping 1 page
document.querySelector('ons-navigator').resetToPage('home.html');
};
Attributes are added directly to the element. You can do this in HTML or JS.
HTML: <ons-back-button someAttribute="true" anotherAttribute><ons-back-button>
JS: document.querySelector('ons-back-button').setAttribute('someAttribute', 'true')
| Name | Type | Description |
|---|---|---|
| modifier | String | The appearance of the back button. Optional. |
Properties are accessed on the element through JS, and should be get and set directly. For example: document.querySelector('ons-back-button').options.
| Name | Description |
|---|---|
| options | Options object. |
| options.animation |
Animation name. Available animations are “slide”, “lift”, “fade” and “none”. These are platform based animations. For fixed animations, add “-ios” or “-md” suffix to the animation name. E.g. “lift-ios”, “lift-md”. Defaults values are “slide-ios” and “fade-md”. |
| options.animationOptions |
Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}
|
| options.callback | Function that is called when the transition has ended. |
| onClick | Used to override the default back button behavior. |
Modifiers are set in the modifier attribute. To use more than one, separate them by spaces. For example:
<ons-back-button modifier="material
modifier2"><ons-back-button>.
| Name | Description |
|---|---|
| material | Material Design style |
If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.