Modals
The Modals API provides methods for triggering native modal windows for alerts, confirmations, and input prompts, as
well as Action Sheets.
Example
import { Plugins, ActionSheetOptionStyle } from '@capacitor/core';
const { Modals } = Plugins;
async showAlert() {
let alertRet = await Modals.alert({
title: 'Stop',
message: 'this is an error'
});
}
async showConfirm() {
let confirmRet = await Modals.confirm({
title: 'Confirm',
message: 'Are you sure you\'d like to press the red button?'
});
console.log('Confirm ret', confirmRet);
}
async showPrompt() {
let promptRet = await Modals.prompt({
title: 'Hello',
message: 'What\'s your name?'
});
console.log('Prompt ret', promptRet);
}
async showActions() {
let promptRet = await Modals.showActions({
title: 'Photo Options',
message: 'Select an option to perform',
options: [
{
title: 'Upload'
},
{
title: 'Share'
},
{
title: 'Remove',
style: ActionSheetOptionStyle.Destructive
}
]
})
console.log('You selected', promptRet);
}
API
alert(…)
alert(options: AlertOptions) => Promise<void>
Show an alert modal
prompt(…)
prompt(options: PromptOptions) => Promise<PromptResult>
Show a prompt modal
Returns:
Promise<PromptResult>
confirm(…)
confirm(options: ConfirmOptions) => Promise<ConfirmResult>
Show a confirmation modal
Returns:
Promise<ConfirmResult>
showActions(…)
showActions(options: ActionSheetOptions) => Promise<ActionSheetResult>
Show an Action Sheet style modal with various options for the user
to select.
Returns:
Promise<ActionSheetResult>
Interfaces
AlertOptions
Prop |
Type |
title |
string |
message |
string |
buttonTitle |
string |
PromptResult
Prop |
Type |
value |
string |
cancelled |
boolean |
PromptOptions
Prop |
Type |
title |
string |
message |
string |
okButtonTitle |
string |
cancelButtonTitle |
string |
inputPlaceholder |
string |
inputText |
string |
ConfirmResult
ConfirmOptions
Prop |
Type |
title |
string |
message |
string |
okButtonTitle |
string |
cancelButtonTitle |
string |
ActionSheetResult
ActionSheetOptions
Prop |
Type | Description |
title |
string |
|
message |
string |
iOS only |
options |
ActionSheetOption[] |
|
ActionSheetOption
Prop |
Type | Description |
title |
string |
|
style |
ActionSheetOptionStyle |
|
icon |
string |
Icon for web (ionicon naming convention) |
Enums
ActionSheetOptionStyle
Members |
Value |
Default |
"DEFAULT" |
Destructive |
"DESTRUCTIVE" |
Cancel |
"CANCEL" |
Previous
<-
Local Notifications
Next
Motion ->
Contribute ->