提示

Toasts 通过屏幕上的消息提供关于操作的简短反馈。

Toast App 方法

让我们看看与 Toast 相关的 App 方法来处理 Toast：

app.toast.create(参数)- 创建 Toast 实例

  • 参数 - 对象. 带有 Toast 参数的对象

方法返回创建的 Toast 的实例

app.toast.destroy(el)- 销毁 Toast 实例

  • el - HTMLElement或字符串(使用 CSS 选择器) 或对象. 要销毁的 Toast 元素或 Toast 实例。

app.toast.get(el)- 通过 HTML 元素获取 Toast 实例

  • el - HTMLElement或字符串(使用 CSS 选择器)。Toast 元素。

方法返回 Toast 的实例

app.toast.open(el, animate)- 打开 Toast

  • el - HTMLElement或字符串(使用 CSS 选择器)。要打开的 Toast 元素。
  • animate - 布尔值. 带动画打开 Toast。

方法返回 Toast 的实例

app.toast.close(el, animate)- 关闭 Toast

  • el - HTMLElement或字符串(使用 CSS 选择器)。要关闭的 Toast 元素。
  • animate - 布尔值. 带动画关闭 Toast。

方法返回 Toast 的实例

app.toast.show(参数)- 创建 Toast 实例并立即显示

  • 参数 - 对象. 带有 Toast 参数的对象

方法返回创建的 Toast 的实例

Toast 参数

现在让我们看看需要创建 Toast 的可用参数列表：

参数类型默认描述
elHTMLElementToast 元素。如果你已经在 HTML 中有 Toast 元素，并想使用这个元素创建新的实例，这会很有用
icon字符串Toast 图标 HTML 布局，例如<i class="f7-icons">house</i>或图像<img src="path/to/icon.png" />
text字符串Toast 内部文本
位置字符串底部相同Toast 位置。可以是bottom, center或top
horizontalPosition字符串左Toast 在宽屏上的水平对齐。仅对顶部和底部 Toast 有效。可以是left, center或right
closeButton布尔值false添加 Toast 关闭按钮
closeButtonColor字符串之一默认颜色主题
closeButtonText字符串OkClose 按钮文本
closeTimeout数字自动关闭 Toast 的超时延迟（以毫秒为单位）
cssClass字符串要添加的附加 CSS 类
destroyOnClose布尔值false在关闭时销毁 Toast 实例
render函数自定义函数来渲染 Toast。必须返回 toast html
containerElHTMLElement
字符串		允许将 Toast 挂载到自定义元素而不是 app 根元素
on对象

带有事件处理程序的对象。例如：

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

注意，所有以下参数都可以在toast设置所有 Toast 默认值的属性。例如：

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

Toast 方法 & 属性

所以要创建 Toast，我们必须调用：

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

之后我们就有其初始化的实例（如toast示例中上面的变量）以及有用的方法和属性：

属性
toast.app链接到全局应用实例
toast.elToast HTML 元素
toast.$el包含 Toast HTML 元素的 Dom7 实例
toast.paramsToast 参数
方法
toast.open()打开 toast
toast.close()关闭 toast
toast.on(事件上触发, 处理程序)添加事件处理程序
toast.once(事件上触发, 处理程序)添加在触发后将被移除的事件处理程序
toast.off(事件上触发, 处理程序)移除事件处理程序
toast.off(事件上触发)移除指定事件的所有处理程序
toast.emit(事件上触发, ...args)在实例上触发事件

Toast 事件

Toast 将在 Toast 元素上触发以下 DOM 事件，以及在 app 和 Toast 实例上触发事件：

DOM 事件

事件Target描述
toast:openToast 元素<div class="toast">当 Toast 开始其打开动画时，将触发此事件
toast:openedToast 元素<div class="toast">Toast 完成其打开动画后，将触发此事件
toast:closeToast 元素<div class="toast">当 Toast 开始其关闭动画时，将触发此事件
toast:closedToast 元素<div class="toast">Toast 完成其关闭动画后，将触发此事件

App 和 Toast 实例事件

Toast 实例在自身实例和 app 实例上触发事件。App 实例事件名称前缀为toast.

事件参数Target描述
closeButtonClicktoasttoast当用户点击 Toast 关闭按钮时，将触发此事件。作为参数，事件处理程序接收 toast 实例
toastCloseButtonClicktoastapp
open为前缀toasttoast当 Toast 开始其打开动画时，将触发此事件。作为参数，事件处理程序接收 toast 实例
toastOpentoastapp
openedtoasttoastToast 完成其打开动画后，将触发此事件。作为参数，事件处理程序接收 toast 实例
toastOpenedtoastapp
closetoasttoast当 Toast 开始其关闭动画时，将触发此事件。作为参数，事件处理程序接收 toast 实例
toastClosetoastapp
closedtoasttoastToast 完成其关闭动画后，将触发此事件。作为参数，事件处理程序接收 toast 实例
toastClosedtoastapp
beforeDestroytoasttoast在 Toast 实例将被销毁之前，将触发此事件。作为参数，事件处理程序接收 toast 实例
toastBeforeDestroytoastapp

CSS 变量

以下是相关CSS 变量(CSS 自定义属性) 的列表。

:root {
  --f7-toast-font-size: 14px;
  --f7-toast-icon-size: 48px;
  --f7-toast-max-width: 568px;
}
.ios {
  --f7-toast-text-color: #fff;
  --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-padding-horizontal: 24px;
  --f7-toast-padding-vertical: 14px;
  --f7-toast-border-radius: 16px;
  --f7-toast-button-min-width: 64px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-toast-text-color: var(--f7-md-on-surface);
  --f7-toast-bg-color: var(--f7-md-surface-5);
}

示例

toast.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Toast</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>Toasts provide brief feedback about an operation through a message on the screen.</p>
        <p>
          <a class="button button-fill" @click=${showToastBottom}>Toast on Bottom</a>
        </p>
        <p>
          <a class="button button-fill" @click=${showToastTop}>Toast on Top</a>
        </p>
        <p>
          <a class="button button-fill" @click=${showToastCenter}>Toast on Center</a>
        </p>
        <p>
          <a class="button button-fill" @click=${showToastIcon}>Toast with icon</a>
        </p>
        <p>
          <a class="button button-fill" @click=${showToastLargeMessage}>Toast with large message</a>
        </p>
        <p>
          <a class="button button-fill" @click=${showToastWithButton}>Toast with close button</a>
        </p>
        <p>
          <a class="button button-fill" @click=${showToastWithCustomButton}>Toast with custom button</a>
        </p>
        <p>
          <a class="button button-fill" @click=${showToastWithCallback}>Toast with callback on close</a>
        </p>
      </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 ? '<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>
改进此文档
在本页上