ユーザーインターフェイス / コンポーネント / ダイアログ

ダイアログ

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メソッドは、複数のパラメーターか、 titlemessagecancelBUttonTextactionscancelable(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を使用します。

APIリファレンス

名前 タイプ
tns-core-modules/ui/dialogsModule
actionfunction
ActionOptionsinterface
alertfunction
AlertOptionsinterface
confirmfunction
ConfirmOptionsinterface
loginfunction
LoginOptionsinterface
LoginResultsinterface
promptfunction
PromptOptionsinterface

ネイティブコンポーネント

ANDROID IOS
android.app.AlertDialog.Builder UIAlertController

訳注:具体例はこちら

入門

コアコンセプト

ユーザーインターフェース

ツール

ハードウェアアクセス

プラグインの開発

リリース

アプリテンプレート

パフォーマンスの最適化

フレームワークモジュール

ガイド

サポートを受ける

トラブルシューティング

Siedkick