The <ons-navigator> element handles a stack of pages. This is a very common type of navigation in mobile apps where one page is pushed on top of another using a transition animation.
To change the animation you can use the animation attribute:
<ons-navigator animation="fade"></ons-navigator>
Available animations are:
fadeliftslidenoneFor iOS’ “swipe to pop” feature, add the swipeable attribute. Note that this behavior is automatically removed on Android platforms unless swipeable="force" is specified.
The pages that you push to the Navigator are defined using a <template> element.
<template id="page2.html">
<ons-page>
...
</ons-page>
</template>
The id attribute is used to reference the pages when pushing.
To push a new page to the top of the stack, the pushPage(page, options) method is used.
In Onsen UI all such methods are attached to the element so you need to create a reference to it. You can do this by using var attribute:
<ons-navigator var="myNavigator"></ons-navigator>
This will allow you to call Navigator’s method like this: myNavigator.pushPage('page2.html');
pushPage method returns a Promise object that is resolved when the transition is finished. You can try adding the following code:
myNavigator
.pushPage('page2.html')
.then(function() {
ons.notification.alert('Page pushed!');
});
It may be useful to have access to custom data when we push a new page. This is achieved by passing options.data parameter:
myNavigator
.pushPage('page2.html', {
data: {
title: 'New Page',
// ...
},
// Other options
});
options.data object can be safely accessed after the init event of the new page. ons-init handler can be used to handle this event.
It is also possible to access this object from scope functions or views with myNavigator.topPage.data.
To go back to a previous page the popPage(options) method is used.
Another way is to 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.
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| modifier | String | バックボタンの見た目を指定します。 Optional. |
| 名前 | 概要 |
|---|---|
| options | オプションを指定するオブジェクト。 |
| 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 |
アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}
|
| options.callback | このメソッドによる画面遷移が終了した際に呼び出される関数オブジェクトを指定します。 |
| onClick | Used to override the default back button behavior. （翻訳中） |
| Name | 概要 |
|---|---|
| material | Material Design style （翻訳中） |
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。