Skip to main content
Version: 5.35.0

Confirm

A confirm dialog is used when it is required to confirm an action. It has two buttons, one of which confirms the action, and the other one rejects it.

Usage​

The following example displays a confirm dialog on button click.

<script setup>
  import { ref } from 'vue';
  import { MbscConfirm, MbscButton } from '@mobiscroll/vue';

  const isConfirmOpen = ref(false);

  const handleClose = (result) => {
    console.log('Result:', result);
    isConfirmOpen.value = false;
  };
</script>

<template>
  <MbscConfirm
    title="Use location service?"
    message="Help apps determine location. This means sending anonymous location data, even when no apps are running."
    okText="Agree"
    cancelText="Disagree"
    :isOpen="isConfirmOpen"
    @close="handleClose"
  />
  <MbscButton @click="isConfirmOpen = true">Confirm</MbscButton>
</template>

Options​

Explore the following API options that help you easily configure the Confirm component.

animation​

boolean | "pop" | "slide-down" | "slide-up"

Animation to use when the component is opened or closed.

Default value: undefined

cssClass​

string

Specifies a custom CSS class for the component.

Default value: undefined

display​

"center" | "top" | "bottom"

Controls the positioning of the component.

Default value: undefined

isOpen​

boolean

Specifies if the component is opened or not. Use it together with the onClose event, by setting it to false when the component closes.

Default value: undefined

message​

string

Message to present.

theme​

string

Specifies the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If custom themes are also present, they will take precedence over the built in themes, e.g. if there's an iOS based custom theme, it will be chosen on the iOS platform instead of the default iOS theme.

Supplied themes:

  • 'ios' - iOS theme
  • 'material' - Material theme
  • 'windows' - Windows theme

It's possible to modify theme colors or create custom themes.

info

Make sure that the theme you set is included in the downloaded package.

Default value: undefined

themeVariant​

"light" | "dark" | "auto"

Controls which variant of the theme will be used (light or dark).

Possible values:

  • 'light' - Use the light variant of the theme.
  • 'dark' - Use the dark variant of the theme.
  • 'auto' or undefined - Detect the preferred system theme on devices where this is supported.

To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one, suffixed with '-dark', e.g.: 'my-theme' and 'my-theme-dark'.

Default value: undefined

title​

string

Title for the dialog.

Default value: undefined

Localization​

The Confirm component is fully localized. This covers date and time format, button copy, rtl and more.

cancelText​

string

Text for the button which cancels the dialog.

Default value: 'Cancel'

okText​

string

Text for the button which closes the dialog.

Default value: 'OK'

Events​

The Confirm component ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

@close​

(result: boolean) => void

Triggered when the component is closed.