搜索文档 /
阴影

ion-toast

Toast是现代应用中常用的一种微妙的通知。它可用于提供有关操作的反馈或显示系统消息。祝酒词会出现在应用程序的内容顶部,可以被应用程序驳回,以恢复用户与应用程序的互动。

定位

烤面包可以放置在视口的顶部、底部或中间。职位可以在创建时传递。可能的值是 底部 中间 .如果没有指定位置,吐司将显示在视口的底部。

解雇

吐司可以在经过一段特定的时间后自动解散,通过毫秒数来显示它 持续时间 烤面包的选择。如果按钮的角色为 “取消” 添加,则该按钮将取消吐司。解散后的祝酒词创造,叫 把() 方法。

接口

烤面包按钮


              接口
             
              烤面包按钮
             
              
             文本
              
              
             
              一串
              
             图标
              
              
             
              一串
              
             一边
              
              
             
              “开始”
             
              |
             
              “结束”
              
             角色
              
              
             
              “取消”
             
              |
             
              一串
              
             cssClass
              
              
             
              一串
             
              |
             
              一串
              
              
              
             处理程序
              
              
             
              
              
             
              =>
             
              布尔值
             
              |
             
              无效
             
              |
             
              承诺
              <
              布尔值
             
              |
             
              无效
              >
              
             
              
复制 复制

ToastOptions


              接口
             
              ToastOptions
             
              
             
              
              
             
              一串
              
             消息
              
              
             
              一串
             
              |
             betway东盟体育appIonicSafeString
              
             cssClass
              
              
             
              一串
             
              |
             
              一串
              
              
              
             持续时间
              
              
             
              数量
              
             按钮
              
              
             
              
             烤面包按钮
              |
             
              一串
              
              
              
              
             位置
              
              
             
              “高级”
             
              |
             
              “底”
             
              |
             
              “中间”
              
             半透明的
              
              
             
              布尔值
              
             动画
              
              
             
              布尔值
              
             颜色
              
              
             颜色
              
             模式
              
              
             模式
              
             键盘闭合
              
              
             
              布尔值
              
             id
              
              
             
              一串
              
             enterAnimation
              
              
             AnimationBuilder
              
             leaveAnimation
              
              
             AnimationBuilder
              
             
              
复制 复制

使用


                进口
               
                
               组件
                
               
                从…起
               
                “@angular /核心”
                
               
                进口
               
                
               ToastController
                
               
                从…起
               
                “@betway东盟体育appionic /角”
                
               
                组件
                
                
               选择器
                
               
                “toast示例”
                
               模板URL
                
               
                “toast-example.html”
                
               styleUrls
                
               
                
                “./toast example.css”
                
                
               
                
                
               
                出口
               
                
               
                烤面包
               
                
               
                建造师
                
                 平民的
                toastController
                 
                ToastController
                
               
                
                
               
                异步的
               
                祝酒词
                
                
               
                
               
                常数
               烤面包
                
               
                等待
               
                
                
               toastController
                
                创造
                
                
               消息
                
               
                “您的设置已保存。”
                
               持续时间
                
               
                2000
               
                
                
                
               烤面包
                
                现在
                
                
                
               
                
               
                异步的
               
                用选项演示
                
                
               
                
               
                常数
               烤面包
                
               
                等待
               
                
                
               toastController
                
                创造
                
                
               
                
               
                “面包头”
                
               消息
                
               
                “单击以关闭”
                
               位置
                
               
                “高级”
                
               按钮
                
               
                
               
                
               一边
                
               
                “开始”
                
               图标
                
               
                “星”
                
               文本
                
               
                “最喜欢的”
                
               
                处理程序
                
               
                
                
               
                =>
               
                
               
                控制台
                
                日志
                
                “最喜欢的点击”
                
                
               
                
               
                
                
               
                
               文本
                
               
                “完成”
                
               角色
                
               
                “取消”
                
               
                处理程序
                
               
                
                
               
                =>
               
                
               
                控制台
                
                日志
                
                “取消点击”
                
                
               
                
               
                
               
                
               
                
                
                
               
                等待
               烤面包
                
                现在
                
                
                
               
                常数
               
                
               角色
                
               
                
               
                等待
               烤面包
                
                昂迪迪解雇
                
                
                
               
                控制台
                
                日志
                
                'onDidDismiss resolve with role'
                
               角色
                
                
               
                
               
                
复制 复制

                异步的
               
                函数
               
                祝酒词
                
                
               
                
               
                常数
               烤面包
                
               文档
                
                createElement
                
                “ion-toast”
                
                
               烤面包
                
               消息
                
               
                “您的设置已保存。”
                
               烤面包
                
               持续时间
                
               
                2000
                
               文档
                
               身体
                
                列表末尾
                
               烤面包
                
                
               
                返回
               烤面包
                
                现在
                
                
                
               
                
               
                异步的
               
                函数
               
                用选项演示
                
                
               
                
               
                常数
               烤面包
                
               文档
                
                createElement
                
                “ion-toast”
                
                
               烤面包
                
               
                
               
                “面包头”
                
               烤面包
                
               消息
                
               
                “单击以关闭”
                
               烤面包
                
               位置
                
               
                “高级”
                
               烤面包
                
               按钮
                
               
                
               
                
               一边
                
               
                “开始”
                
               图标
                
               
                “星”
                
               文本
                
               
                “最喜欢的”
                
               
                处理程序
                
               
                
                
               
                =>
               
                
               控制台
                
                日志
                
                “最喜欢的点击”
                
                
               
                
               
                
                
               
                
               文本
                
               
                “完成”
                
               角色
                
               
                “取消”
                
               
                处理程序
                
               
                
                
               
                =>
               
                
               控制台
                
                日志
                
                “取消点击”
                
                
               
                
               
                
               
                
                
               文档
                
               身体
                
                列表末尾
                
               烤面包
                
                
               
                等待
               烤面包
                
                现在
                
                
                
               
                常数
               
                
               角色
                
               
                
               
                等待
               烤面包
                
                昂迪迪解雇
                
                
                
               控制台
                
                日志
                
                'onDidDismiss resolve with role'
                
               角色
                
                
               
                
复制 复制

                /*使用useIonToast钩子*/
               
                进口
               反应
                从…起
               
                “反应”
                
               
                进口
               
                
               IonButton
                
               IonContent
                
               伊恩佩奇
                
               useIonToast
                
               
                从…起
               
                “@betway东盟体育appionic/react”
                
               
                常数
               烤面包
                
               反应
                
                足球俱乐部
               
                
               
                
                
               
                =>
               
                
               
                常数
               
                
               现在
                
               驳回
                
               
                
               
                useIonToast
                
                
                
               
                返回
               
                
               
                  <
                  伊恩佩奇
                 >
                
                  <
                  IonContent
                 >
                
                  <
                  IonButton
                
                 扩大
                  
                  
                 
                  
                
                 onClick
                  
                  
                  
                  
                 
                  =>
                 
                  现在
                  
                  
                 按钮
                  
                 
                  
                  
                 文本
                  
                 
                  “隐藏”
                  
                 
                  处理程序
                  
                 
                  
                  
                 
                  =>
                 
                  驳回
                  
                  
                 
                  
                  
                  
                 消息
                  
                 
                  'toast from hook, click hide to dismiss'
                  
                 
                  昂迪迪解雇
                  
                 
                  
                  
                 
                  =>
                 
                  控制台
                  
                  日志
                  
                  “开除”
                  
                  
                 
                  onWillDismiss
                  
                 
                  
                  
                 
                  =>
                 
                  控制台
                  
                  日志
                  
                  “将解雇”
                  
                  
                 
                  
                  
                 
                  
                
                 >
                敬酒
                  
                  IonButton
                 >
                
                  <
                  IonButton
                
                 扩大
                  
                  
                 
                  
                
                 onClick
                  
                  
                  
                  
                 
                  =>
                 
                  现在
                  
                  “你好从钩的
                  
                 
                  3000
                  
                  
                
                 >
                使用参数显示Toast,3秒后关闭
                  
                  IonButton
                 >
                
                  <
                  IonButton
                
                 扩大
                  
                  
                 
                  
                
                 onClick
                  
                  
                 驳回
                  
                 >
                藏烤面包
                  
                  IonButton
                 >
                
                  
                  IonContent
                 >
                
                  
                  伊恩佩奇
                 >
               
                
                
               
                
                
复制 复制

                /*使用IonToast组件*/
               
                进口
               反应
                
               
                
               useState
                
               
                从…起
               
                “反应”
                
               
                进口
               
                
               IonToast
                
               IonContent
                
               IonButton
                
               
                从…起
               
                “@betway东盟体育appionic/react”
                
               
                出口
               
                常数
               烤面包
                
               反应
                
                足球俱乐部
               
                
               
                
                
               
                =>
               
                
               
                常数
               
                
               showToast1
                
               setShowToast1
                
               
                
               
                useState
                
                
                
                
               
                常数
               
                
               showToast2
                
               setShowToast2
                
               
                
               
                useState
                
                
                
                
               
                返回
               
                
               
                  <
                  IonContent
                 >
                
                  <
                  IonButton
                
                 onClick
                  
                  
                  
                  
                 
                  =>
                 
                  setShowToast1
                  
                  真正的
                  
                  
                
                 扩大
                  
                  
                 
                  
                 >
                祝酒词1
                  
                  IonButton
                 >
                
                  <
                  IonButton
                
                 onClick
                  
                  
                  
                  
                 
                  =>
                 
                  setShowToast2
                  
                  真正的
                  
                  
                
                 扩大
                  
                  
                 
                  
                 >
                祝酒辞2
                  
                  IonButton
                 >
                
                  <
                  IonToast
                
                 等参
                  
                  
                 showToast1
                  
                
                 昂迪迪解雇
                  
                  
                  
                  
                 
                  =>
                 
                  setShowToast1
                  
                  
                  
                  
                
                 消息
                  
                  
                 您的设置已保存。
                  
                
                 持续时间
                  
                  
                  200
                  
                
                 />
                
                  <
                  IonToast
                
                 等参
                  
                  
                 showToast2
                  
                
                 昂迪迪解雇
                  
                  
                  
                  
                 
                  =>
                 
                  setShowToast2
                  
                  
                  
                  
                
                 消息
                  
                  
                 点击关闭
                  
                
                 位置
                  
                  
                 
                  
                
                 按钮
                  
                  
                  
                 
                  
                 一边
                  
                 
                  “开始”
                  
                 图标
                  
                 
                  “星”
                  
                 文本
                  
                 
                  “最喜欢的”
                  
                 
                  处理程序
                  
                 
                  
                  
                 
                  =>
                 
                  
                 
                  控制台
                  
                  日志
                  
                  “最喜欢的点击”
                  
                  
                 
                  
                 
                  
                  
                 
                  
                 文本
                  
                 
                  “完成”
                  
                 角色
                  
                 
                  “取消”
                  
                 
                  处理程序
                  
                 
                  
                  
                 
                  =>
                 
                  
                 
                  控制台
                  
                  日志
                  
                  “取消点击”
                  
                  
                 
                  
                 
                  
                 
                  
                  
                
                 />
                
                  
                  IonContent
                 >
               
                
                
               
                
                
复制 复制

                进口
               
                
               组件
                
               h
                
               
                从…起
               
                “@stencil /核心”
                
               
                进口
               
                
               toastController
                
               
                从…起
               
                “@betway东盟体育appionic/core”
                
               
                组件
                
                
               标签
                
               
                “toast示例”
                
               样式URL
                
               
                'toast example.css'
               
                
                
               
                出口
               
                
               
                烤面包
               
                
               
                异步的
               
                祝酒词
                
                
               
                
               
                常数
               烤面包
                
               
                等待
               toastController
                
                创造
                
                
               消息
                
               
                “您的设置已保存。”
                
               持续时间
                
               
                2000
               
                
                
                
               烤面包
                
                现在
                
                
                
               
                
               
                异步的
               
                用选项演示
                
                
               
                
               
                常数
               烤面包
                
               
                等待
               toastController
                
                创造
                
                
               
                
               
                “面包头”
                
               消息
                
               
                “单击以关闭”
                
               位置
                
               
                “高级”
                
               按钮
                
               
                
               
                
               一边
                
               
                “开始”
                
               图标
                
               
                “星”
                
               文本
                
               
                “最喜欢的”
                
               
                处理程序
                
               
                
                
               
                =>
               
                
               
                控制台
                
                日志
                
                “最喜欢的点击”
                
                
               
                
               
                
                
               
                
               文本
                
               
                “完成”
                
               角色
                
               
                “取消”
                
               
                处理程序
                
               
                
                
               
                =>
               
                
               
                控制台
                
                日志
                
                “取消点击”
                
                
               
                
               
                
               
                
               
                
                
                
               
                等待
               烤面包
                
                现在
                
                
                
               
                常数
               
                
               角色
                
               
                
               
                等待
               烤面包
                
                昂迪迪解雇
                
                
                
               
                控制台
                
                日志
                
                'onDidDismiss resolve with role'
                
               角色
                
                
               
                
               
                渲染
                
                
               
                
               
                返回
               
                
               
                  <
                 离子含量
                 >
                
                  <
                 ion-button
                
                 onClick
                  
                  
                  
                  
                 
                  =>
                 
                  
                  
                  祝酒词
                  
                  
                  
                 >
                现在烤面包
                  
                 ion-button
                 >
                
                  <
                 ion-button
                
                 onClick
                  
                  
                  
                  
                 
                  =>
                 
                  
                  
                  用选项演示
                  
                  
                  
                 >
                现在吐司:选项
                  
                 ion-button
                 >
                
                  
                 离子含量
                 >
               
                
                
               
                
               
                
复制 复制

                  <
                 模板
                 >
               
                  <
                 ion-page
                 >
               
                  <
                 离子含量
                
                 
                  
                  
                 离子填充
                  
                 >
               
                  <
                 ion-button
                
                 @点击
                  
                  
                 烤面包片
                  
                 >
               开放的烤面包
                  
                 ion-button
                 >
               
                  <
                 ion-button
                
                 @点击
                  
                  
                 openToastOptions
                  
                 >
               开放吐司:选项
                  
                 ion-button
                 >
               
                  
                 离子含量
                 >
               
                  
                 ion-page
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  
                 IonButton
                  
                 IonContent
                  
                 伊恩佩奇
                  
                 toastController
                  
                 
                  从…起
                 
                  “@betway东盟体育appionic / vue”
                  
                 
                  出口
                 
                  默认的
                 
                  
                 组件
                  
                 
                  
                 IonButton
                  
                 IonContent
                  
                 伊恩佩奇
                  
                  
                 方法
                  
                 
                  
                 
                  异步的
                 
                  烤面包片
                  
                  
                 
                  
                 
                  常数
                 烤面包
                  
                 
                  等待
                 toastController
                  
                  创造
                  
                  
                 消息
                  
                 
                  “您的设置已保存。”
                  
                 持续时间
                  
                 
                  2000
                 
                  
                  
                 
                  返回
                 烤面包
                  
                  现在
                  
                  
                  
                 
                  
                  
                 
                  异步的
                 
                  openToastOptions
                  
                  
                 
                  
                 
                  常数
                 烤面包
                  
                 
                  等待
                 toastController
                  
                  创造
                  
                  
                 
                  
                 
                  “面包头”
                  
                 消息
                  
                 
                  “单击以关闭”
                  
                 位置
                  
                 
                  “高级”
                  
                 按钮
                  
                 
                  
                 
                  
                 一边
                  
                 
                  “开始”
                  
                 图标
                  
                 
                  “星”
                  
                 文本
                  
                 
                  “最喜欢的”
                  
                 
                  处理程序
                  
                 
                  
                  
                 
                  =>
                 
                  
                 控制台
                  
                  日志
                  
                  “最喜欢的点击”
                  
                  
                 
                  
                 
                  
                  
                 
                  
                 文本
                  
                 
                  “完成”
                  
                 角色
                  
                 
                  “取消”
                  
                 
                  处理程序
                  
                 
                  
                  
                 
                  =>
                 
                  
                 控制台
                  
                  日志
                  
                  “取消点击”
                  
                  
                 
                  
                 
                  
                 
                  
                 
                  
                  
                 
                  等待
                 烤面包
                  
                  现在
                  
                  
                  
                 
                  常数
                 
                  
                 角色
                  
                 
                  
                 
                  等待
                 烤面包
                  
                  昂迪迪解雇
                  
                  
                  
                 控制台
                  
                  日志
                  
                  'onDidDismiss resolve with role'
                  
                 角色
                  
                  
                 
                  
                  
                 
                  
                  
                 
                  
                 
                  
                 脚本
                 >
复制 复制

开发人员还可以在其模板中直接使用此组件:


                  <
                 模板
                 >
               
                  <
                 ion-button
                
                 @点击
                  
                  
                 setOpen(真正的)
                  
                 >
               敬酒
                  
                 ion-button
                 >
               
                  <
                 ion-toast
                
                 :是开放的
                  
                  
                 等间距
                  
                
                 消息
                  
                  
                 您的设置已保存。
                  
                
                 :持续时间
                  
                  
                 2000
                  
                
                 @didDismiss
                  
                  
                 setOpen(假)
                  
                
                 >
               
                  
                 ion-toast
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  
                 IonToast
                  
                 IonButton
                  
                 
                  从…起
                 
                  “@betway东盟体育appionic / vue”
                  
                 
                  进口
                 
                  
                 defineComponent
                  
                 裁判
                  
                 
                  从…起
                 
                  “vue”
                  
                 
                  出口
                 
                  默认的
                 
                  defineComponent
                  
                  
                 组件
                  
                 
                  
                 IonToast
                  
                 IonButton
                  
                  
                 
                  设置
                  
                  
                 
                  
                 
                  常数
                 等间距
                  
                 
                  裁判
                  
                  
                  
                  
                 
                  常数
                 
                  打开
                 
                  
                 
                  
                  状态
                   
                  布尔值
                  
                 
                  =>
                 等间距
                  
                 价值
                  
                 状态
                  
                 
                  返回
                 
                  
                 等间距
                  
                 打开
                  
                 
                  
                 
                  
                  
                  
                 
                  
                 脚本
                 >
复制 复制

性质

动画

描述

如果真正的,吐司将会动画。

属性 动画
类型 布尔值
默认的 真正的

按钮

描述

烤面包的一系列按钮。

类型 (字符串| toast按钮)[]未定义

颜色

描述

要从应用程序的调色板中使用的颜色。默认选项为:“主要”“二级”“第三”“成功”“警告”“危险”“光”“中等”,“黑暗”.有关颜色的更多信息,请参见 主题

属性 颜色
类型 字符串|未定义

cssClass

描述

用于自定义CSS的附加类。如果提供了多个类,它们应该用空格分隔。

属性 css类
类型 String | String [] | undefined

持续时间

描述

要等多少毫秒才能把吐司藏起来。默认情况下,显示until把()被称为。

属性 持续时间
类型 数量
默认的 0

enterAnimation

描述

演示土司时要使用的动画。

类型 ((baseEl:any,opts?:any)=>动画)|未定义

描述

祝酒词中要显示头部。

属性
类型 字符串|未定义

键盘闭合

描述

如果真正的,键盘将自动取消时,覆盖显示。

属性 keyboard-close
类型 布尔值
默认的

leaveAnimation

描述

当祝酒辞被取消时使用的动画。

类型 ((baseEl:any,opts?:any)=>动画)|未定义

消息

描述

祝酒词中要表达的意思。

属性 消息
类型 betway东盟体育appIonicSafeString | string | undefined

模式

描述

该模式确定要使用的平台样式。

属性 模式
类型 “ios”|“md”

位置

描述

屏幕上烤面包片的位置。

属性 位置
类型 "bottom" | "middle" | "top"
默认的 “底”

半透明的

描述

如果真正的,烤面包片将是半透明的。仅在模式为时适用“ios”并且设备支持backdrop-filter

属性 半透明的
类型 布尔值
默认的

事件

名称 描述
Iontoastdiddisease 祝酒结束后发出的
爱奥尼·托马斯蒂德出席 敬酒后发出。
Iontoast将解雇 在祝酒结束前发出。
ionToastWillPresent 在敬酒前发出。

方法

驳回

描述

在敬酒覆盖层被提出后解散它。

签名 解雇(数据?:任何作用?:字符串|未定义)=>承诺<布尔值>

昂迪迪解雇

描述

返回一个承诺,该承诺在toast确实解除时解决。

签名 onDidDismiss() => Promise> . onDidDismiss(

onWillDismiss

描述

返回一个承诺,该承诺在toast将被解散时解析。

签名 onWillDismiss() => Promise> . onWillDismiss(

现在

描述

呈现吐司覆盖后,它已经被创建。

签名 礼物()= > < >无效承诺

CSS阴影部分

名称 描述
按钮 显示在吐司内部的任何按钮元素。
容器 包装所有子元素的元素。
祝酒词的标题文本。
消息 祝酒辞的正文。

CSS自定义属性

名称 描述
——背景 祝酒辞的背景
——边框颜色 吐司的边框颜色
--边界半径 吐司的边界半径
——边框样式 边框式吐司
——边框宽度 烤面包的边缘宽度
——不必 盒子阴影的祝酒词
——按钮的颜色 按钮文本的颜色
--颜色 祝酒词文本的颜色
——结束 如果方向是从左到右,则从右定位;如果方向是从右到左,则从左定位
——高度 烤面包的高度
--最大高度 烤面包片的最大高度
——max-width 烤面包片的最大宽度
--最小高度 吐司的最小高度
——min-width 吐司的最小宽度
——开始 如果方向为从左到右,则从左;如果方向为从右到左,则从右
--空白 祝酒词的空白处
——宽度 烤面包片宽度
查看源代码
Baidu