Toast

Examples

<template>
  <div id="app">
    <div class="view view-main view-init">
      <!-- source start -->
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Toast</div>
          </div>
        </div>
        <div class="page-content">
          <div class="block block-strong">
            <p>
              <a href="#" class="button button-fill" @click=${showToastBottom}>Toast on Bottom</a>
            </p>
            <p>
              <a href="#" class="button button-fill" @click=${showToastTop}>Toast on Top</a>
            </p>
            <p>
              <a href="#" class="button button-fill" @click=${showToastCenter}>Toast on Center</a>
            </p>
            <p>
              <a href="#" class="button button-fill" @click=${showToastIcon}>Toast with icon</a>
            </p>
            <p>
              <a href="#" class="button button-fill" @click=${showToastLargeMessage}>Toast with large message</a>
            </p>
            <p>
              <a href="#" class="button button-fill" @click=${showToastWithButton}>Toast with close button</a>
            </p>
            <p>
              <a href="#" class="button button-fill" @click=${showToastWithCustomButton}>Toast with custom button</a>
            </p>
            <p>
              <a href="#" class="button button-fill" @click=${showToastWithCallback}>Toast with callback on close</a>
            </p>
          </div>
        </div>
        <!-- source start -->
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $theme, $on }) => {
    let toastBottom;
    let toastTop;
    let toastCenter;
    let toastIcon;
    let toastLargeMessage;
    let toastWithButton;
    let toastWithCustomButton;
    let toastWithCallback;

    const showToastBottom = () => {
      // Create toast
      if (!toastBottom) {
        toastBottom = $f7.toast.create({
          text: 'This is default bottom positioned toast',
          closeTimeout: 2000,
        });
      }
      // Open it
      toastBottom.open();
    }
    const showToastTop = () => {
      // Create toast
      if (!toastTop) {
        toastTop = $f7.toast.create({
          text: 'Top positioned toast',
          position: 'top',
          closeTimeout: 2000,
        });
      }
      // Open it
      toastTop.open();
    }
    const showToastCenter = () => {
      // Create toast
      if (!toastCenter) {
        toastCenter = $f7.toast.create({
          text: 'I\'m on center',
          position: 'center',
          closeTimeout: 2000,
        });
      }
      // Open it
      toastCenter.open();
    }
    const showToastIcon = () => {
      // Create toast
      if (!toastIcon) {
        toastIcon = $f7.toast.create({
          icon: $theme.ios || $theme.aurora ? '<i class="f7-icons">star_fill</i>' : '<i class="material-icons">star</i>',
          text: 'I\'m with icon',
          position: 'center',
          closeTimeout: 2000,
        });
      }
      // Open it
      toastIcon.open();
    }
    const showToastLargeMessage = () => {
      // Create toast
      if (!toastLargeMessage) {
        toastLargeMessage = $f7.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,
        });
      }
      // Open it
      toastLargeMessage.open();
    }
    const showToastWithButton = () => {
      // Create toast
      if (!toastWithButton) {
        toastWithButton = $f7.toast.create({
          text: 'Toast with additional close button',
          closeButton: true,
        });
      }
      // Open it
      toastWithButton.open();
    }
    const showToastWithCustomButton = () => {
      // Create toast
      if (!toastWithCustomButton) {
        toastWithCustomButton = $f7.toast.create({
          text: 'Custom close button',
          closeButton: true,
          closeButtonText: 'Close Me',
          closeButtonColor: 'red',
        });
      }
      // Open it
      toastWithCustomButton.open();
    }
    const showToastWithCallback = () => {
      // Create toast
      if (!toastWithCallback) {
        toastWithCallback = $f7.toast.create({
          text: 'Callback on close',
          closeButton: true,
          on: {
            close: function () {
              $f7.dialog.alert('Toast closed');
            },
          }
        });
      }
      // Open it
      toastWithCallback.open();
    }

    $on('pageBeforeOut', () => {
      $f7.toast.close();
    })

    $on('pageBeforeRemove', () => {
      // Destroy toasts when page removed
      if (toastBottom) toastBottom.destroy();
      if (toastTop) toastTop.destroy();
      if (toastCenter) toastCenter.destroy();
      if (toastIcon) toastIcon.destroy();
      if (toastLargeMessage) toastLargeMessage.destroy();
      if (toastWithButton) toastWithButton.destroy();
      if (toastWithCustomButton) toastWithCustomButton.destroy();
      if (toastWithCallback) toastWithCallback.destroy();
    })

    return $render;
  }
</script>