Front end of the Slack clone application.

toast-controller.js 4.2KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. import { Injectable } from '@angular/core';
  2. import { App } from '../app/app';
  3. import { Config } from '../../config/config';
  4. import { Toast } from './toast';
  5. /**
  6. * @name ToastController
  7. * @description
  8. * A Toast is a subtle notification commonly used in modern applications.
  9. * It can be used to provide feedback about an operation or to
  10. * display a system message. The toast appears on top of the app's content,
  11. * and can be dismissed by the app to resume user interaction with
  12. * the app.
  13. *
  14. * ### Creating
  15. * All of the toast options should be passed in the first argument of
  16. * the create method: `create(opts)`. The message to display should be
  17. * passed in the `message` property. The `showCloseButton` option can be set to
  18. * true in order to display a close button on the toast. See the [create](#create)
  19. * method below for all available options.
  20. *
  21. * ### Positioning
  22. * Toasts can be positioned at the top, bottom or middle of the
  23. * view port. The position can be passed to the `Toast.create(opts)` method.
  24. * The position option is a string, and the values accepted are `top`, `bottom` and `middle`.
  25. * If the position is not specified, the toast will be displayed at the bottom of the view port.
  26. *
  27. * ### Dismissing
  28. * The toast can be dismissed automatically after a specific amount of time
  29. * by passing the number of milliseconds to display it in the `duration` of
  30. * the toast options. If `showCloseButton` is set to true, then the close button
  31. * will dismiss the toast. To dismiss the toast after creation, call the `dismiss()`
  32. * method on the Toast instance. The `onDidDismiss` function can be called to perform an action after the toast
  33. * is dismissed.
  34. *
  35. * @usage
  36. * ```ts
  37. * import { ToastController } from 'ionic-angular';
  38. *
  39. * constructor(public toastCtrl: ToastController) { }
  40. *
  41. * presentToast() {
  42. * const toast = this.toastCtrl.create({
  43. * message: 'User was added successfully',
  44. * duration: 3000,
  45. * position: 'top'
  46. * });
  47. *
  48. * toast.onDidDismiss(() => {
  49. * console.log('Dismissed toast');
  50. * });
  51. *
  52. * toast.present();
  53. * }
  54. * ```
  55. * @advanced
  56. * | Property | Type | Default | Description |
  57. * |-----------------------|-----------|-----------------|---------------------------------------------------------------------------------------------------------------|
  58. * | message | `string` | - | The message for the toast. Long strings will wrap and the toast container will expand. |
  59. * | duration | `number` | - | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. |
  60. * | position | `string` | "bottom" | The position of the toast on the screen. Accepted values: "top", "middle", "bottom". |
  61. * | cssClass | `string` | - | Additional classes for custom styles, separated by spaces. |
  62. * | showCloseButton | `boolean` | false | Whether or not to show a button to close the toast. |
  63. * | closeButtonText | `string` | "Close" | Text to display in the close button. |
  64. * | dismissOnPageChange | `boolean` | false | Whether to dismiss the toast when navigating to a new page. |
  65. *
  66. * @demo /docs/demos/src/toast/
  67. */
  68. export class ToastController {
  69. constructor(_app, config) {
  70. this._app = _app;
  71. this.config = config;
  72. }
  73. /**
  74. * Create a new toast component. See options below
  75. * @param {ToastOptions} opts Toast options. See the below table for available options.
  76. */
  77. create(opts = {}) {
  78. return new Toast(this._app, opts, this.config);
  79. }
  80. }
  81. ToastController.decorators = [
  82. { type: Injectable },
  83. ];
  84. /** @nocollapse */
  85. ToastController.ctorParameters = () => [
  86. { type: App, },
  87. { type: Config, },
  88. ];
  89. //# sourceMappingURL=toast-controller.js.map