ons-back-button

実例

Going back

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>.

Overriding default behavior

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. (翻訳中)

プリセットのmodifier

Name 概要
material Material Design style (翻訳中)

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。