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');
};
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| 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に記載をお願いいたします。
あわせて、下記の情報も参考にしてください。