Alert, confirm & prompt
Use the alert, confirm and prompt messages to pop a message box in the middle of the screen. Alert the user or collect feedback at the same time. These controls cannot be dismissed by pressing the overlay, which avoids closing it by mistake.
Demo
Alert
Alerts have a title, message and a confirmation button.
<MbscAlert
title="Cellular Data is Turned Off for 'Safari'"
message="You can turn on cellular data for this app in Settings."
/>Confirm
Besides a title and message, the confrim dialog supports a customizable okText and cancelText.
<MbscConfirm
title="Use location service?"
message="Help apps determine the location. This means sending anonymous location data, even when no apps are running."
okText="Agree"
cancelText="Disagree"
/>Prompt
Adding to the title and message, the prompt provides a focused way of capturing user input. With the inputType, passwords can be entered and the placeholder provides a helper text.
<MbscPrompt
title="Sign in to iTunes Store"
message="Enter the Apple ID password for 'hello@mobiscroll.com'."
placeholder="placeholder"
inputType="password"
/>SFC JSSFC TS
<script setup>
import {
MbscAlert,
MbscButton,
MbscConfirm,
MbscPage,
MbscPrompt,
setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const isAlertOpen = ref(false)
const isConfirmOpen = ref(false)
const isPromptOpen = ref(false)
</script>
<template>
<MbscPage>
<MbscAlert
title="Cellular Data is Turned Off for 'Safari'"
message="You can turn on cellular data for this app in Settings."
:isOpen="isAlertOpen"
@close="isAlertOpen = true"
/>
<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="isConfirmOpen = true"
/>
<MbscPrompt
title="Sign in to iTunes Store"
message="Enter the Apple ID password for 'hello@mobiscroll.com'."
placeholder="placeholder"
inputType="password"
:isOpen="isPromptOpen"
@close="isPromptOpen = true"
/>
<MbscButton @click="isAlertOpen = true">Alert</MbscButton>
<MbscButton @click="isConfirmOpen = true">Confirm</MbscButton>
<MbscButton @click="isPromptOpen = true">Prompt</MbscButton>
</MbscPage>
</template>
<script setup lang="ts">
import {
MbscAlert,
MbscButton,
MbscConfirm,
MbscPage,
MbscPrompt,
setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const isAlertOpen = ref<boolean>(false)
const isConfirmOpen = ref<boolean>(false)
const isPromptOpen = ref<boolean>(false)
</script>
<template>
<MbscPage>
<MbscAlert
title="Cellular Data is Turned Off for 'Safari'"
message="You can turn on cellular data for this app in Settings."
:isOpen="isAlertOpen"
@close="isAlertOpen = true"
/>
<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="isConfirmOpen = true"
/>
<MbscPrompt
title="Sign in to iTunes Store"
message="Enter the Apple ID password for 'hello@mobiscroll.com'."
placeholder="placeholder"
inputType="password"
:isOpen="isPromptOpen"
@close="isPromptOpen = true"
/>
<MbscButton @click="isAlertOpen = true">Alert</MbscButton>
<MbscButton @click="isConfirmOpen = true">Confirm</MbscButton>
<MbscButton @click="isPromptOpen = true">Prompt</MbscButton>
</MbscPage>
</template>