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.
The Navigator is a component that provides stack based navigation. It is a very common navigation pattern in mobile apps.
After pushing a page to the top of the stack it will be displayed using transition animation. When the user goes back to the previous page the top page will be popped from the top of the stack and hidden with an corresponding transition animation.
The Navigator maintains a stack of route objects. These objects can be arbitrary objects and are rendered into pages with the renderPage property. The renderPage property must be set to a function that returns a Page component.
To push a new page on top of the stack, the pushPage(route) method is used. Similarly, a page is popped from the stack with the popPage() method.
The stack must be initialized with either the initialRoute or initialRouteStack, depending on whether the the stack needs to be initialized with one or more pages.
The BackButton component can be used to put a back button in the navigation bar. The component will automatically find the Navigator component and pop a page when pressed.
<Toolbar>
<div className='left'>
<BackButton>Back</BackButton>
</div>
<div className='center'>
Title
</div>
</Toolbar>
There are several animations available for the Navigator component. To change the animation the animation property is used. Available animations are slide, lift and fade. Setting the property to none will make the transition instantly.
It is also possible to customize the duration, delay and timing function of the animation using the animationOptions property.
<Navigator
initialRoute={...}
renderPage={...}
animation='fade'
animationOptions={{duration: 0.2, timing: 'ease-in'}}
/>
For iOS’ “swipe to pop” feature, add the swipeable prop. Note that this behavior is automatically removed on Android platforms unless swipeable={'force'} is specified.
| Name | Type | Description |
|---|---|---|
| modifier | String | The appearance of the back button. Optional. |
| 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. |
| 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.