Ionic Toast (提示框)

Toast 是一种在现代应用程序中常用的 通知 类型。您可以使用它来显示系统消息，也可以使用它来提供有关操作的反馈。Toast 通知会显示在应用程序内容的顶部。它可以被应用程序 关闭 以恢复用户与应用程序的交互。

Toast 控制器

Toast 控制器是一个组件，用于创建 toast 组件。Toast 控制器使用 两种方法 来创建 toast 通知。这些方法是

1. 创建
2. 关闭

创建

它用于创建一个 toast 覆盖。所有 toast 选项都应在 create 方法中传递。消息属性用于显示 消息。如果要显示 toast 上的关闭按钮，请将 showCloseButton 选项设置为 true。

示例

以下示例使用 toast 控制器方法 create() 来显示 toast 通知。在 HTML 文件中，按钮组件调用 openToast() 函数来显示 toast 通知。该函数的逻辑是在应用程序的 ts 文件中创建的。openToast() 函数还包含属性的 message 和 duration。message 属性将显示通知消息，duration 属性将在指定时间后关闭通知。

Home.page.html

Home.page.ts

输出

执行该应用程序时，将给出以下输出。

现在，单击 显示 Toast 按钮，您将获得通知消息。通知消息在 五秒钟 后关闭。

关闭

可以通过设置以毫秒为单位的数字来显示在 toast 选项的持续时间中，以在特定时间后自动关闭 toast 通知。如果将“showCloseButton”设置为 true，关闭按钮将关闭 toast。如果您想在创建后关闭 toast，请调用 dismiss() 方法。

示例

Home.page.ts

在这个文件中，我们将使用 dismiss 方法。dismiss 方法会在您单击 隐藏按钮 后立即消失 toast 通知。

输出

当您执行上述 Ionic 应用程序时，它将给出以下输出。现在，单击 显示 Toast 按钮，通知消息将显示在底部。单击隐藏 按钮，toast 通知将消失，并且相应的消息将显示在 控制台 中。

定位

您可以将 toast 通知定位在视口的顶部、底部、中间。position 属性 的值可以在 create 方法中设置。位置值有顶部、底部 和 中间。默认情况下，toast 通知的位置显示在视口的底部。

示例

在下面的示例中，我们将看到位置属性的使用。在这里，toast 通知的位置设置在中间。

输出

当您运行上面的代码片段时，您将获得输出。接下来，单击该按钮，您将获得以下屏幕。在这里，您可以看到 toast 通知显示在中间。