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" |
| 默认的 |
“底” |
半透明的 |
|
| 描述 |
如果 |
| 属性 |
半透明的 |
| 类型 |
布尔值 |
| 默认的 |
假 |
事件
| 名称 | 描述 |
|---|---|
Iontoastdiddisease |
祝酒结束后发出的 |
爱奥尼·托马斯蒂德出席 |
敬酒后发出。 |
Iontoast将解雇 |
在祝酒结束前发出。 |
ionToastWillPresent |
在敬酒前发出。 |
方法
驳回 |
|
|---|---|
| 描述 |
在敬酒覆盖层被提出后解散它。 |
| 签名 |
解雇(数据?:任何作用?：字符串|未定义）=>承诺<布尔值> |
昂迪迪解雇 |
|
| 描述 |
返回一个承诺，该承诺在toast确实解除时解决。 |
| 签名 |
onDidDismiss |
onWillDismiss |
|
| 描述 |
返回一个承诺，该承诺在toast将被解散时解析。 |
| 签名 |
onWillDismiss |
现在 |
|
| 描述 |
呈现吐司覆盖后，它已经被创建。 |
| 签名 |
礼物()= > < >无效承诺 |
CSS阴影部分
| 名称 | 描述 |
|---|---|
按钮 |
显示在吐司内部的任何按钮元素。 |
容器 |
包装所有子元素的元素。 |
头 |
祝酒词的标题文本。 |
消息 |
祝酒辞的正文。 |
CSS自定义属性
| 名称 | 描述 |
|---|---|
——背景 |
祝酒辞的背景 |
——边框颜色 |
吐司的边框颜色 |
--边界半径 |
吐司的边界半径 |
——边框样式 |
边框式吐司 |
——边框宽度 |
烤面包的边缘宽度 |
——不必 |
盒子阴影的祝酒词 |
——按钮的颜色 |
按钮文本的颜色 |
--颜色 |
祝酒词文本的颜色 |
——结束 |
如果方向是从左到右，则从右定位；如果方向是从右到左，则从左定位 |
——高度 |
烤面包的高度 |
--最大高度 |
烤面包片的最大高度 |
——max-width |
烤面包片的最大宽度 |
--最小高度 |
吐司的最小高度 |
——min-width |
吐司的最小宽度 |
——开始 |
如果方向为从左到右，则从左;如果方向为从右到左，则从右 |
--空白 |
祝酒词的空白处 |
——宽度 |
烤面包片宽度 |