Toast

    Toasts provide brief feedback about an operation through a message on the screen.

    Let’s look at related App methods to work with Toast:

    app.toast.create(parameters)- create Toast instance

    • parameters - object. Object with toast parameters

    Method returns created Toast’s instance

    app.toast.destroy(el)- destroy Toast instance

    • el - HTMLElement or string (with CSS Selector) or object. Toast element or Toast instance to destroy.

    app.toast.get(el)- get Toast instance by HTML element

    • el - HTMLElement or string (with CSS Selector). Toast element.

    app.toast.open(el, animate)- opens Toast

    • el - HTMLElement or string (with CSS Selector). Toast element to open.
    • animate - boolean. Open Toast with animation.

    Method returns Toast’s instance

    app.toast.close(el, animate)- closes Toast

    • el - HTMLElement or string (with CSS Selector). Toast element to close.
    • animate - boolean. Close Toast with animation.

    Method returns Toast’s instance

    app.toast.show(parameters)- create Toast instance and show immediately

    • parameters - object. Object with toast parameters

    Method returns created Toast’s instance

    Toast Parameters

    Note that all following parameters can be used in global app parameters under toast property to set defaults for all toasts. For example:

    1. var app = new Framework7({
    2.   toast: {
    3.     closeTimeout: 3000,
    4.     closeButton: true,
    5.   }
    6. });

    So to create Toast we have to call:

    After that we have its initialized instance (like toast variable in example above) with useful methods and properties:

    Toast Events

    Toast will fire the following DOM events on toast element and events on app and toast instance:

    App and Toast Instance Events

    Toast instance emits events on both self instance and app instance. App instance events has same names prefixed with toast.

    Below is the list of related (CSS custom properties).

    1. :root {
    2.   --f7-toast-text-color: #fff;
    3.   --f7-toast-font-size: 14px;
    4.   --f7-toast-icon-size: 48px;
    5. }
    6. .ios {
    7.   --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
    8.   --f7-toast-translucent-bg-color-ios: rgba(0, 0, 0, 0.75);
    9.   --f7-toast-padding-horizontal: 15px;
    10.   --f7-toast-padding-vertical: 12px;
    11.   --f7-toast-border-radius: 8px;
    12.   --f7-toast-button-min-width: 64px;
    13. }
    14. .md {
    15.   --f7-toast-bg-color: #323232;
    16.   --f7-toast-padding-horizontal: 24px;
    17.   --f7-toast-padding-vertical: 14px;
    18.   --f7-toast-border-radius: 4px;
    19.   --f7-toast-button-min-width: 64px;
    20. }
    21.   --f7-toast-bg-color: rgba(0, 0, 0, 0.85);
    22.   --f7-toast-padding-horizontal: 10px;
    23.   --f7-toast-padding-vertical: 10px;
    24.   --f7-toast-border-radius: 4px;
    25.   --f7-toast-button-min-width: 32px;

    Examples

    1. var app = new Framework7();
    3. var $$ = Dom7;
    5. // Create bottom toast
    6. var toastBottom = app.toast.create({
    7.   text: 'This is default bottom positioned toast',
    8.   closeTimeout: 2000,
    9. });
    10. // Create top toast
    11. var toastTop = app.toast.create({
    12.   text: 'Top positioned toast',
    13.   position: 'top',
    14.   closeTimeout: 2000,
    15. });
    16. // Create center toast
    17. var toastCenter = app.toast.create({
    18.   text: 'I\'m on center',
    19.   position: 'center',
    20.   closeTimeout: 2000,
    21. });
    22. // Create toast with icon
    23. var toastIcon = app.toast.create({
    24.   icon: app.theme === 'ios' ? '<i class="f7-icons">star</i>' : '<i class="material-icons">star</i>',
    25.   text: 'I\'m with icon',
    26.   position: 'center',
    27.   closeTimeout: 2000,
    28. });
    29. // Create toast with large message
    30. var toastLargeMessage = app.toast.create({
    31.   text: 'This toast contains a lot of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quae, ab. Delectus amet optio facere autem sapiente quisquam beatae culpa dolore.',
    32.   closeTimeout: 2000,
    33. });
    34. // Create toast with button
    35. var toastWithButton = app.toast.create({
    36.   text: 'Toast with additional close button',
    37. });
    38. // Create toast with custom button text
    40.   text: 'Custom close button',
    41.   closeButton: true,
    42.   closeButtonText: 'Close Me',
    43.   closeButtonColor: 'red',
    44. });
    45. // Create toast with callback on close
    46. var toastWithCallback = app.toast.create({
    47.   text: 'Callback on close',
    48.   closeButton: true,
    49.   on: {
    50.     close: function () {
    51.       app.dialog.alert('Toast closed');
    52.     },
    53.   }
    54. });
    56. // Open toasts
    57. $$('.open-toast-bottom').on('click', function () {
    58.   toastBottom.open();
    59. });
    60. $$('.open-toast-top').on('click', function () {
    61.   toastTop.open();
    62. });
    63. $$('.open-toast-center').on('click', function () {
    64.   toastCenter.open();
    65. });
    66. $$('.open-toast-icon').on('click', function () {
    67.   toastIcon.open();
    68. });
    69. $$('.open-toast-large').on('click', function () {
    70.   toastLargeMessage.open();
    71. });
    72. $$('.open-toast-button').on('click', function () {
    73.   toastWithButton.open();
    74. });
    75. $$('.open-toast-custom-button').on('click', function () {
    76.   toastWithCustomButton.open();
    77. });
    78. $$('.open-toast-callback').on('click', function () {
    79. });