Alert dialogs

Alert dialogs are defined using <v-ons-alert-dialog> and <v-ons-alert-dialog-button> tags. Alert dialogs work exactly like normal dialogs but they require some additional markup. With this element you can create a beautifully styled dialog without any additional CSS.

To show or hide the dialog the visible prop is used. An update:visible event is fired when the user interacts with the component (taps the background mask). Use this event to refresh the value of visible prop. Vue’s sync modifier can also be used.

Custom alerts

VOnsAlertDialog allows to create custom alerts with optional inputs, methods or anything else. We can pass all the information with props:

<v-ons-alert-dialog modifier="rowfooter"
  :title="myTitle"
  :footer="{
    Cancel: () => isVisible = false,
    Ok: () => isVisible = false
  }"
  :visible.sync="isVisible"
>

  Content here
</v-ons-alert-dialog>

For higher control, it is also possible to use slots (can be combined with props):

<v-ons-alert-dialog modifier="rowfooter"
  :visible.sync="isVisible"
>
  <span slot="title">Title</span>

  Content here

  <template slot="footer">
    <v-ons-alert-dialog-button @click="isVisible = false">Cancel</v-ons-alert-dialog-button>
    <v-ons-alert-dialog-button @click="isVisible = false">Ok</v-ons-alert-dialog-button>
  </template>
</v-ons-alert-dialog>

The optional rowfooter modifier forces the buttons to be displayed on a single row rather than a column.

Notification methods

The $ons.notification object contains some useful methods to easily show alerts, confirmation dialogs and prompts:

$ons.notification.alert(message, options);
$ons.notification.confirm(message, options);
$ons.notification.prompt(message, options);

They all return a Promise object that can be used to handle the input from the user.

$ons.notification.confirm('Are you ready?')
  .then((response) => {
    // Handle response.
  });