Action Sheet
Action Sheets slide up from the bottom edge of the device screen, and display a set of options with the ability to confirm or cancel an action. Action Sheets can sometimes be used as an alternative to menus, however, they should not be used for navigation.
The Action Sheet always appears above any other components on the page, and must be dismissed in order to interact with the underlying content. When it is triggered, the rest of the page darkens to give more focus to the Action Sheet options.
Action Sheets can be displayed as a list or as a grid, with icons or with avatars. They can be used either as a component in your Vue file templates, or as a globally available method.
Basic Usage as a Method
First, we install it:
Edit /quasar.conf.js
:
framework: { |
Now let’s see how we can use it:
// outside of a Vue file |
Basic syntax for the config object:
this.$q.actionSheet({ |
IMPORTANT
When user hits the phone/tablet back button (only for Cordova apps), the Action Sheet will get closed automatically.
Also, when on a desktop browser, hitting the <ESCAPE> key also closes the Action Sheet.
Handling Outcome
The returning object when creating an ActionSheet is a Promise, so you can leverage the Promise API to handle the outcome:
this.$q.actionSheet({...}) |
Basic Usage As a Component
First, we install it:
Edit /quasar.conf.js
:
framework: { |
Now let’s see how we can use it:
<template> |
QActionSheet Vue Properties
Vue Property | Type | Required | Description |
---|---|---|---|
actions | Array of Objects | yes | Defining ActionSheet actions |
title | String | Title of Action Sheet. | |
grid | Boolean | Makes it a “tag” type. | |
dismiss-label | String | Override default i18n “Cancel” label (for iOS theme only) |
QActionSheet Vue Events
Vue Property | Description |
---|---|
@ok(action) | User picked an action. |
@cancel | User dismissed ActionSheet. |
@show | ActionSheet has just been showed to the user. |
@hide | ActionSheet has been hidden (regardless of outcome). |
@escape-key | ActionSheet dismissed with ESCAPE key. |