There are three components used to show dialogs: Dialog, AlertDialog and Toast. The Dialog component is a general dialog where you can put any content. AlertDialog has some default styles that make it easy to show errors, warnings or questions to the user.
And Toast is a message (with optional button) that does not stop the app flow.
To show or hide the dialog the isOpen prop is used.
<Dialog isOpen={this.state.dialogShown}>
Hi!
<Button onClick={this.hideDialog.bind(this)}>
Close
</Button>
</Dialog>
The ons.notification object contains some useful methods to easily show alerts, confirmation dialogs and prompts:
ons.notification.alert(message, options)ons.notificaiton.confirm(message, options)ons.notification.prompt(message, options)ons.notification.toast(message, options)They all return a Promise object that can be used to handle the input from the user.
ons.notification.confirm('Are you ready?')
.then((response) => {
// Handle response.
});
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| animation |
String
default |
The animation used when showing and hiding the toast. Can be either "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
（翻訳中）
Optional.
|
| animation-options | Expression |
アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’}
Optional.
|
| visible | Boolean |
要素が見える場合にtrue。
Optional.
|
| 名前 | 概要 |
|---|---|
| animationOptions | アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: ‘ease-in’} |
| onDeviceBackButton | バックボタンハンドラ。 |
| visible |
要素が見える場合にtrue。
|
| シグネチャ | 概要 |
|---|---|
| show([options]) | Show the element. （翻訳中） |
| toggle([options]) | Toggle toast visibility. （翻訳中） |
| hide([options]) | Hide toast. （翻訳中） |
Show the element. （翻訳中）
返り値:
| 名前 | 型 | 概要 |
|---|---|---|
| options | Object | オプションを指定するオブジェクト。 |
| options.animation | String |
Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
（翻訳中）
|
| options.animationOptions | String | アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’} |
Toggle toast visibility. （翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| options | Object | オプションを指定するオブジェクト。 |
| options.animation | String |
Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
（翻訳中）
|
| options.animationOptions | String | アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’} |
Hide toast. （翻訳中）
返り値:
| 名前 | 型 | 概要 |
|---|---|---|
| options | Object | オプションを指定するオブジェクト。 |
| options.animation | String |
Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
（翻訳中）
|
| options.animationOptions | String | アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’} |
| 名前 | 概要 |
|---|---|
| preshow | ダイアログが表示される直前に発火します。 |
| postshow | ダイアログが表示された直後に発火します。 |
| prehide | ダイアログが隠れる直前に発火します。 |
| posthide | ダイアログが隠れた後に発火します。 |
ダイアログが表示される直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.toast | Object | ダイアログのオブジェクト。 |
| event.cancel | Function | この関数を実行すると、ダイアログの表示を止めます。 |
ダイアログが表示された直後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.toast | Object | ダイアログのオブジェクト。 |
ダイアログが隠れる直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.toast | Object | ダイアログのオブジェクト。 |
| event.cancel | Function | この関数を実行すると、ダイアログが閉じようとするのを止めます。 |
ダイアログが隠れた後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.toast | Object | ダイアログのオブジェクト。 |
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。