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:

ParameterTypeDefaultDescription
elHTMLElementToast element. Can be useful if you already have Toast element in your HTML and want to create new instance using this element
iconstringToast icon HTML layout, e.g. <i class="f7-icons">home</i> or image <img src="path/to/icon.png">
textstringToast inner text
positionstringbottomToast position. Can be bottom, center or top
closeButtonbooleanfalseAdds toast close button
closeButtonColorstringOne of the default color themes
closeButtonTextstringOkClose button text
closeTimeoutnumberTimeout delay (in ms) to close toast automatically
cssClassstringAdditional css class to add
destroyOnClosebooleanfalseDestroys toast instance on close
renderfunctionCustom function to render Toast. Must return toast html
onobjectObject with events handlers. For example:
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:

Properties
toast.appLink to global app instance
toast.elToast HTML element
toast.$elDom7 instance with toast HTML element
toast.paramsToast parameters
Methods
toast.open()Open toast
toast.close()Close toast
toast.on(event, handler)Add event handler
toast.once(event, handler)Add event handler that will be removed after it was fired
toast.off(event, handler)Remove event handler
toast.off(event)Remove all handlers for specified event
toast.emit(event, ...args)Fire event on instance

Toast Events

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

DOM Events

EventTargetDescription
toast:openToast Element<div class="toast">Event will be triggered when Toast starts its opening animation
toast:openedToast Element<div class="toast">Event will be triggered after Toast completes its opening animation
toast:closeToast Element<div class="toast">Event will be triggered when Toast starts its closing animation
toast:closedToast Element<div class="toast">Event will be triggered after Toast completes its closing animation

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.

EventArgumentsTargetDescription
closeButtonClicktoasttoastEvent will be triggered when user clicks on Toast close button. As an argument event handler receives toast instance
toastCloseButtonClicktoastapp
opentoasttoastEvent will be triggered when Toast starts its opening animation. As an argument event handler receives toast instance
toastOpentoastapp
openedtoasttoastEvent will be triggered after Toast completes its opening animation. As an argument event handler receives toast instance
toastOpenedtoastapp
closetoasttoastEvent will be triggered when Toast starts its closing animation. As an argument event handler receives toast instance
toastClosetoastapp
closedtoasttoastEvent will be triggered after Toast completes its closing animation. As an argument event handler receives toast instance
toastClosedtoastapp
beforeDestroytoasttoastEvent will be triggered right before Toast instance will be destroyed. As an argument event handler receives toast instance
toastBeforeDestroytoastapp

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-translucent-bg-color-ios: rgba(0, 0, 0, 0.75);
  --f7-toast-padding-horizontal: 15px;
  --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();
});