Toast

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

Toast App Methods

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.

Method returns Toast’s instance

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

Now let’s look at list of available parameters we need to create Toast:

var toast = app.toast.create({
  text: ‘Hello, how are you?’,
  on: {
    opened: function () {
      console.log(‘Toast opened’)
    }
  }
})

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

var app = new Framework7({
  toast: {
    closeTimeout: 3000,
    closeButton: true,
  }
});

Toast Methods & Properties

So to create Toast we have to call:

var toast = app.toast.create({ /* parameters */ })

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:

DOM Events

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.

CSS Variables

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

:root {
  --f7-toast-text-color: #fff;
  --f7-toast-font-size: 14px;
  --f7-toast-icon-size: 48px;
}
.ios {
  --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
  --f7-toast-bg-color-rgb: 0, 0, 0;
  --f7-toast-padding-horizontal: 16px;
  --f7-toast-padding-vertical: 12px;
  --f7-toast-border-radius: 8px;
  --f7-toast-button-min-width: 64px;
}
.md {
  --f7-toast-bg-color: #323232;
  --f7-toast-padding-horizontal: 24px;
  --f7-toast-padding-vertical: 14px;
  --f7-toast-border-radius: 4px;
  --f7-toast-button-min-width: 64px;
}
.aurora {
  --f7-toast-bg-color: rgba(0, 0, 0, 0.85);
  --f7-toast-padding-horizontal: 10px;
  --f7-toast-padding-vertical: 10px;
  --f7-toast-border-radius: 4px;
  --f7-toast-button-min-width: 32px;
}

Examples

<div class="block">
  <p>
    <a href="#" class="button button-raised open-toast-bottom">Toast on Bottom</a>
  </p>
  <p>
    <a href="#" class="button button-raised open-toast-top">Toast on Top</a>
  </p>
  <p>
    <a href="#" class="button button-raised open-toast-center">Toast on Center</a>
  </p>
  <p>
    <a href="#" class="button button-raised open-toast-icon">Toast with icon</a>
  </p>
  <p>
    <a href="#" class="button button-raised open-toast-large">Toast with large message</a>
  </p>
  <p>
    <a href="#" class="button button-raised open-toast-button">Toast with close button</a>
  </p>
  <p>
    <a href="#" class="button button-raised open-toast-custom-button">Toast with custom button</a>
  </p>
  <p>
    <a href="#" class="button button-raised open-toast-callback">Toast with callback on close</a>
  </p>
</div>

var app = new Framework7();
var $$ = Dom7;
// Create bottom toast
var toastBottom = app.toast.create({
  text: 'This is default bottom positioned toast',
  closeTimeout: 2000,
});
// Create top toast
var toastTop = app.toast.create({
  text: 'Top positioned toast',
  position: 'top',
  closeTimeout: 2000,
});
// Create center toast
var toastCenter = app.toast.create({
  text: 'I\'m on center',
  position: 'center',
  closeTimeout: 2000,
});
// Create toast with icon
var toastIcon = app.toast.create({
  icon: app.theme === 'ios' ? '<i class="f7-icons">star</i>' : '<i class="material-icons">star</i>',
  text: 'I\'m with icon',
  position: 'center',
  closeTimeout: 2000,
});
// Create toast with large message
var toastLargeMessage = app.toast.create({
  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.',
  closeTimeout: 2000,
});
// Create toast with button
var toastWithButton = app.toast.create({
  text: 'Toast with additional close button',
  closeButton: true,
});
// Create toast with custom button text
var toastWithCustomButton = app.toast.create({
  text: 'Custom close button',
  closeButton: true,
  closeButtonText: 'Close Me',
  closeButtonColor: 'red',
});
// Create toast with callback on close
var toastWithCallback = app.toast.create({
  text: 'Callback on close',
  closeButton: true,
  on: {
    close: function () {
      app.dialog.alert('Toast closed');
    },
  }
});
// Open toasts
$$('.open-toast-bottom').on('click', function () {
  toastBottom.open();
});
$$('.open-toast-top').on('click', function () {
  toastTop.open();
});
$$('.open-toast-center').on('click', function () {
  toastCenter.open();
});
$$('.open-toast-icon').on('click', function () {
  toastIcon.open();
});
$$('.open-toast-large').on('click', function () {
  toastLargeMessage.open();
});
$$('.open-toast-button').on('click', function () {
  toastWithButton.open();
});
$$('.open-toast-custom-button').on('click', function () {
  toastWithCustomButton.open();
});
$$('.open-toast-callback').on('click', function () {
  toastWithCallback.open();
});

← Timeline

Toggle →