NativeScriptを使用すると、Webブラウザーと同様の方法でアプリにダイアログを作成できます。 アクションを必要とするアラート、確認、プロンプト、ログイン、およびダイアログを作成できます。
警告ダイアログは、発生したアクションをユーザーに通知します。次のように定義できます。
const alertOptions = {
title: "Race selection",
message: "Race chosen: Unicorn",
okButtonText: "OK",
cancelable: false // [Android only] Gets or sets if the dialog can be canceled by taping outside of the dialog.
};
alert(alertOptions).then(() => {
console.log("Race chosen!");
});
import { alert, AlertOptions } from "tns-core-modules/ui/dialogs";
export function showAlertDialog() {
const alertOptions: AlertOptions = {
title: "Race selection",
message: "Race chosen: Unicorn",
okButtonText: "OK",
cancelable: false // [Android only] Gets or sets if the dialog can be canceled by taping outside of the dialog.
};
alert(alertOptions).then(() => {
console.log("Race chosen!");
});
}
アクションダイアログには、ユーザーからの特定のアクティビティが必要です。 actionメソッドは、複数のパラメーターか、 title、message、cancelBUttonText、 actions、cancelable(Androidのみ)を持つ ActionOptionsオブジェクトを受け入れます。
パラメーター付きアクション(Webブラウザースタイル)。(訳注:非推奨?)
ActionOptionsオブジェクトを使用したアクション。
function showActionDialog() {
const actionOptions = {
title: "Race selection",
message: "Choose your race",
cancelButtonText: "Cancel",
actions: ["Human", "Elf", "Dwarf", "Orc", "Unicorn"],
cancelable: true // Android only
};
action(actionOptions).then((result) => {
console.log(result);
});
}
exports.showActionDialog = showActionDialog;
import { action, ActionOptions } from "tns-core-modules/ui/dialogs";
export function showActionDialog() {
const actionOptions: ActionOptions = {
title: "Race selection",
message: "Choose your race",
cancelButtonText: "Cancel",
actions: ["Human", "Elf", "Dwarf", "Orc", "Unicorn"],
cancelable: true // Android only
};
action(actionOptions).then((result) => {
console.log("Dialog result: ", result);
if (result === "Options1") {
// Do action 1
} else if (result === "Option2") {
// Do action 2
}
});
}
確認ダイアログは、ユーザーが発生するアクションを受け入れるか拒否することを期待します。例えば:
function showConfirmDialog() {
const confirmOptions = {
title: "Race selection",
message: "Are you sure you want to be a Unicorn?",
okButtonText: "Yes",
cancelButtonText: "No",
neutralButtonText: "Cancel"
};
confirm(confirmOptions)
.then((result) => {
console.log(result);
});
}
exports.showConfirmDialog = showConfirmDialog;
import { confirm, ConfirmOptions } from "tns-core-modules/ui/dialogs";
export function showConfirmDialog() {
const confirmOptions: ConfirmOptions = {
title: "Race selection",
message: "Are you sure you want to be a Unicorn?",
okButtonText: "Yes",
cancelButtonText: "No",
neutralButtonText: "Cancel"
};
confirm(confirmOptions)
.then((result) => {
console.log(result);
});
}
ログインダイアログは、ユーザーが資格情報を入力するのを待ちます。
function showLoginDialog() {
const loginOptions = {
title: "Login Form",
message: "Enter your credentials",
okButtonText: "Login",
cancelButtonText: "Cancel",
neutralButtonText: "Neutral",
userNameHint: "Enter your username",
passwordHint: "Enter your password",
userName: "john_doe",
password: "123456"
};
login(loginOptions).then((loginResult) => {
console.log(loginResult.result);
});
}
exports.showLoginDialog = showLoginDialog;
import { login, LoginOptions, LoginResult } from "tns-core-modules/ui/dialogs";
export function showLoginDialog() {
const loginOptions: LoginOptions = {
title: "Login Form",
message: "Enter your credentials",
okButtonText: "Login",
cancelButtonText: "Cancel",
neutralButtonText: "Neutral",
userNameHint: "Enter your username",
passwordHint: "Enter your password",
userName: "john_doe",
password: "123456"
};
login(loginOptions).then((loginResult: LoginResult) => {
console.log(loginResult.result);
});
}
プロンプトダイアログが入力を要求します。基本的な定義は次のとおりです。
function showPromptDialog() {
const promptOptions = {
title: "Hey There",
defaultText: " Enter your mood ",
message: "How you doin'",
okButtonText: "OK",
cancelButtonText: "Cancel",
neutralButtonText: "Neutral",
cancelable: true,
inputType: "text", // email, number, text, password, or email
capitalizationType: "sentences" // all, none, sentences or words
};
prompt(promptOptions).then((result) => {
console.log(`Hello, ${result.text}`);
});
}
exports.showPromptDialog = showPromptDialog;
import { prompt, PromptOptions, PromptResult, capitalizationType, inputType } from "tns-core-modules/ui/dialogs";
export function showPromptDialog() {
const promptOptions: PromptOptions = {
title: "Hey There",
defaultText: " Enter your mood ",
message: "How you doin'",
okButtonText: "OK",
cancelButtonText: "Cancel",
neutralButtonText: "Neutral",
cancelable: true,
inputType: inputType.text, // email, number, text, password, or email
capitalizationType: capitalizationType.sentences // all. none, sentences or words
};
prompt(promptOptions).then((result: PromptResult) => {
console.log("Hello, " + result.text);
});
}
名前 | タイプ | 説明 |
---|---|---|
title |
string |
ダイアログのタイトルを取得または設定します。 |
message |
string |
ダイアログメッセージを取得または設定します。 |
cancelable |
boolean |
[Androidのみ]ダイアログの外側をタップしてダイアログをキャンセルできるかどうかを取得または設定します。 |
actions |
Array<string> |
利用可能なアクションのリストを取得または設定します。 |
cancelButtonText |
string |
[キャンセル]ボタンのテキストを取得または設定します。 |
名前 | タイプ | 説明 |
---|---|---|
title |
string |
ダイアログのタイトルを取得または設定します。 |
message |
string |
ダイアログメッセージを取得または設定します。 |
cancelable |
boolean |
[Androidのみ]ダイアログの外側をタップしてダイアログをキャンセルできるかどうかを取得または設定します。 |
okButtonText |
string |
[OK]ボタンのテキストを取得または設定します。 |
名前 | タイプ | 説明 |
---|---|---|
title |
string |
ダイアログのタイトルを取得または設定します。 |
message |
string |
ダイアログメッセージを取得または設定します。 |
cancelable |
boolean |
[Androidのみ]ダイアログの外側をタップしてダイアログをキャンセルできるかどうかを取得または設定します。 |
cancelButtonText |
string |
[キャンセル]ボタンのテキストを取得または設定します。 |
okButtonText |
string |
[OK]ボタンのテキストを取得または設定します。 |
neutralButtonText |
string |
ニュートラルボタンテキストを取得または設定します。 |
名前 | タイプ | 説明 |
---|---|---|
title |
string |
ダイアログのタイトルを取得または設定します。 |
message |
string |
ダイアログメッセージを取得または設定します。 |
cancelable |
boolean |
[Androidのみ]ダイアログの外側をタップしてダイアログをキャンセルできるかどうかを取得または設定します。 |
cancelButtonText |
string |
[キャンセル]ボタンのテキストを取得または設定します。 |
okButtonText |
string |
[OK]ボタンのテキストを取得または設定します。 |
neutralButtonText |
string |
ニュートラルボタンテキストを取得または設定します。 |
userName |
string |
ユーザー名入力ボックスに表示するデフォルトのテキストを取得または設定します。 |
userNameHint |
string |
ユーザー名入力ボックスにヒントとして表示するデフォルトのテキストを取得または設定します。 |
password |
string |
パスワード入力ボックスに表示するデフォルトのテキストを取得または設定します。 |
passwordHint |
string |
パスワード入力ボックスにヒントとして表示するデフォルトのテキストを取得または設定します。 |
ユーザーがダイアログを閉じるか取り消すと、ダイアログのPromiseで結果を受信します。
名前 | タイプ | 説明 |
---|---|---|
userName |
string |
ログインダイアログに入力されたユーザー名を取得します。 |
password |
string |
ログインダイアログに入力されたパスワードを取得します。 |
result |
boolean |
ダイアログが取り消されたときにfalseが戻ります。それ以外の場合はtrueが戻ります |
名前 | タイプ | 説明 |
---|---|---|
title |
string |
ダイアログのタイトルを取得または設定します。 |
message |
string |
ダイアログメッセージを取得または設定します。 |
cancelable |
boolean |
[Androidのみ]ダイアログの外側をタップしてダイアログをキャンセルできるかどうかを取得または設定します。 |
cancelButtonText |
string |
[キャンセル]ボタンのテキストを取得または設定します。 |
okButtonText |
string |
[OK]ボタンのテキストを取得または設定します。 |
neutralButtonText |
string |
ニュートラルボタンテキストを取得または設定します。 |
defaultText |
string |
入力ボックスに表示するデフォルトのテキストを取得または設定します。 |
capitalizationType |
string |
プロンプトの大文字の種類(none, all, sentences, or words)を取得または設定します。 |
inputType |
string |
プロンプト入力タイプ(plain text, password, email)を取得または設定します。 |
ユーザーがダイアログを閉じるか取り消すと、ダイアログのPromiseで結果を受信します。
名前 | タイプ | 説明 |
---|---|---|
text |
string |
プロンプトダイアログの入力フィールドに入力されたテキストを取得します。 |
result |
boolean |
ダイアログが取り消されたときにfalseが、それ以外の場合はtrueが戻ります |
該当するイベントはありません。ダイアログは結果を返すためにPromiseを使用します。
名前 | タイプ |
---|---|
tns-core-modules/ui/dialogs | Module |
action | function |
ActionOptions | interface |
alert | function |
AlertOptions | interface |
confirm | function |
ConfirmOptions | interface |
login | function |
LoginOptions | interface |
LoginResults | interface |
prompt | function |
PromptOptions | interface |
ANDROID | IOS |
---|---|
android.app.AlertDialog.Builder | UIAlertController |
訳注:具体例はこちら