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 |
吐司的最小宽度 |
——开始 |
如果方向为从左到右,则从左;如果方向为从右到左,则从右 |
--空白 |
祝酒词的空白处 |
——宽度 |
烤面包片宽度 |