v-ons-back-button

Back button component for <v-ons-toolbar>. Put it in the left part of the <v-ons-toolbar>. It will find the parent <v-ons-navigator> component and pop a page when clicked. This behavior can be overriden by specifying the onClick property.

Tutorial

Going back

The VOnsBackButton component can be used to display a back button in the navigation bar. By default, this component automatically finds its parent VOnsNavigator component and pops a page when pressed. However, this default behavior can be overriden by running event.preventDefault in a click handler (or using Vue’s .prevent shorthand modifier):

<v-ons-back-button @click.prevent="pageStack.splice(1, pageStack.length - 1)"></v-ons-back-button>

The previous code resets the pageStack to its first page instance instead of popping 1 single page. It assumes pageStack variable exists in the current context.

See also

Props

Name Type Description
modifier String The appearance of the back button. Optional.

Preset Modifiers

Name Description
material Material Design style

Events

Name Description
click Normal click event. Useful to modify the component default action (pop 1 page).
click

Normal click event. Useful to modify the component default action (pop 1 page).

Parameters
Name Type Description
event Object Event object.
event.preventDefault Function Avoids the default behavior.

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter 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.