メインコンテンツまでスキップ
バージョン: v2

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

ParamType
options
AlertOptions

prompt(...)

prompt(options: PromptOptions) => Promise<PromptResult>

Show a prompt modal

ParamType
options
PromptOptions

Returns:

Promise<PromptResult>


confirm(...)

confirm(options: ConfirmOptions) => Promise<ConfirmResult>

Show a confirmation modal

ParamType
options
ConfirmOptions

Returns:

Promise<ConfirmResult>


showActions(...)

showActions(options: ActionSheetOptions) => Promise<ActionSheetResult>

Show an Action Sheet style modal with various options for the user to select.

ParamType
options
ActionSheetOptions

Returns:

Promise<ActionSheetResult>


Interfaces

AlertOptions

PropType
titlestring
messagestring
buttonTitlestring

PromptResult

PropType
valuestring
cancelledboolean

PromptOptions

PropType
titlestring
messagestring
okButtonTitlestring
cancelButtonTitlestring
inputPlaceholderstring
inputTextstring

ConfirmResult

PropType
valueboolean

ConfirmOptions

PropType
titlestring
messagestring
okButtonTitlestring
cancelButtonTitlestring

ActionSheetResult

PropType
indexnumber

ActionSheetOptions

PropTypeDescription
titlestring
messagestringiOS only
optionsActionSheetOption[]

ActionSheetOption

PropTypeDescription
titlestring
style
ActionSheetOptionStyle
iconstringIcon for web (ionicon naming convention)

Enums

ActionSheetOptionStyle

MembersValue
Default"DEFAULT"
Destructive"DESTRUCTIVE"
Cancel"CANCEL"