Reference > v-ons-action-sheet

v-ons-action-sheet

Action/bottom sheet that is displayed on top of current screen. This element can either be attached directly to the <body> or dynamically created from a template using the ons.createElement(template, { append: true }) utility function and the <template> tag. The action sheet is useful for displaying a list of options and asking the user to make a decision. A ons-action-sheet-button is provided for this purpose, although it can contain any type of content. It will automatically be displayed as Material Design (bottom sheet) when running on an Android device.

Tutorial

Static action sheet

Onsen UI provides <v-ons-action-sheet> and <v-ons-action-sheet-button> elements. Use them to create a dialog that slides from the bottom of the screen to give user options.

You can display or cancel the action sheet by changing its visible prop value to true or false respectively. v-model:visible can also be used.

Dynamic action sheet

You can also create and open an action sheet dynamically with the method $ons.openActionSheet.

This method takes as argument an object where you can define the action sheet’s properties (e.g. id, title) and the buttons inside it.

See also

Props

Name Type Description
animation String The animation used when showing and hiding the action sheet. Can be either "none" or "default". Optional.
animationOptions Expression Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}. Optional.
cancelable Boolean If this attribute is set the action sheet can be closed by tapping the background or by pressing the back button on Android devices. Optional.
disabled Boolean If this attribute is set the action sheet is disabled. Optional.
maskColor String Color of the background mask. Default is "rgba(0, 0, 0, 0.2)". Optional.
modifier String The appearance of the action sheet. Optional.
title String Optional title of the action sheet. A new element will be created containing this string. Optional.
visible Boolean Whether the action sheet is visible or not. Optional.

Preset Modifiers

Name Description
material Display a Material Design bottom sheet.

Events

Name Description
preshow Fired just before the action sheet is displayed.
postshow Fired just after the action sheet is displayed.
prehide Fired just before the action sheet is hidden.
posthide Fired just after the action sheet is hidden.
dialogcancel Fired when the action sheet is canceled.
deviceBackButton Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler.
update:visible Fired right after user interaction. Useful to update visible prop.
preshow

Fired just before the action sheet is displayed.

Parameters
Name Type Description
event Object Event object.
event.actionSheet Object Component object.
event.cancel Function Execute this function to stop the action sheet from being shown.
postshow

Fired just after the action sheet is displayed.

Parameters
Name Type Description
event Object Event object.
event.actionSheet Object Component object.
prehide

Fired just before the action sheet is hidden.

Parameters
Name Type Description
event Object Event object.
event.actionSheet Object Component object.
event.cancel Function Execute this function to stop the action sheet from being hidden.
posthide

Fired just after the action sheet is hidden.

Parameters
Name Type Description
event Object Event object.
event.actionSheet Object Component object.
dialogcancel

Fired when the action sheet is canceled.

Parameters
Name Type Description
deviceBackButton

Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler.

Parameters
Name Type Description
event Object Event object.
event.preventDefault Function Avoids the default behavior.
event.callParentHandler Function Runs the handler for the immediate parent that supports device back button.
update:visible

Fired right after user interaction. Useful to update visible prop.

Parameters
Name Type Description
event Number New value for visible prop.

Need Help?

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.