ion-loading
一个覆盖层，可以在阻止用户交互的同时指示活动。加载指示器出现在应用程序的内容顶部，可以被应用程序取消，以恢复用户与应用程序的交互。它包括一个可选的背景，可以通过设置禁用
showbackground:错误
创造时。
解雇
加载指示器可以在经过一段特定的时间后自动解除，通过毫秒数来显示它
持续时间
加载选项。要在创建后关闭加载指示符，请调用
把()
方法加载实例。的
昂迪迪解雇
函数可在加载指示符被解除后调用以执行操作。
定制
加载使用作用域封装，这意味着它将通过在运行时向每个样式附加一个附加类来自动确定CSS的作用域。在CSS中重写作用域选择器需要 高特异性 选择器。
我们建议将自定义类传递给
cssClass
在
创造
方法，并使用该方法向宿主元素和内部元素添加自定义样式。这个属性还可以接受由空格分隔的多个类。查看<模板-route-link class="hydrated" c-id="146.55.5.5" s-id="157">
使用
节提供了如何使用传入类的示例
cssClass
．
/*不起作用-不够具体*/
ion-loading
｛
颜色
：
绿色
；
｝
/*工作-在cssClass中传递“my-custom-class”来增加特异性*/
.我的定制课程
｛
颜色
：
绿色
；
｝任何定义的<模板-route-link class="hydrated" c-id="146.109.5.1" s-id="159"> CSS自定义属性 可用于设置加载样式，而无需针对单个图元：
.我的定制课程
｛
——背景
：
#222
；
——spinner-color
：
# fff
；
颜色
：
# fff
；
｝如果您正在构建Ionic Angular应用程betway东盟体育app序，则需要将样式添加到全局样式表文件中。阅读<模板-route-link class="hydrated" c-id="146.155.6.1" s-id="161"> 风格的位置 在下面的Angular部分中了解更多信息。
接口
LoadingOptions
接口
LoadingOptions
｛
纺纱机
？
：
SpinnerTypes
|
零
；
消息
？
：
一串
|
betway东盟体育appIonicSafeString
；
cssClass
？
：
一串
|
一串
［
］
；
showBackdrop
？
：
布尔值
；
持续时间
？
：
数量
；
半透明的
？
：
布尔值
；
动画
？
：
布尔值
；
backdropDismiss
？
：
布尔值
；
模式
？
：
模式
；
键盘闭合
？
：
布尔值
；
id
？
：
一串
；
htmlAttributes
？
：
加载属性
；
enterAnimation
？
：
AnimationBuilder
；
leaveAnimation
？
：
AnimationBuilder
；
｝加载属性
接口
加载属性
延伸
JSXBase
．
HTMLAT贡品
<
HTMLElement
>
｛
｝使用
进口
｛
组件
｝
从…起
“@angular /核心”
；
进口
｛
装载控制器
｝
从…起
“@betway东盟体育appionic /角”
；
＠
组件
（
｛
选择器
：
“加载示例”
，
模板URL
：
'正在加载example.html'
，
styleUrls
：
［
“./正在加载example.css”
］
｝
）
出口
类
加载示例
｛
建造师
（
平民的
装载控制器
：
装载控制器
）
｛
｝
异步的
当前加载
（
）
｛
常数
加载
＝
等待
这
．
装载控制器
．
创造
（
｛
cssClass
：
“my-custom-class”
，
消息
：
“请等待…”
，
持续时间
：
2000
｝
）
；
等待
加载
．
现在
（
）
；
常数
｛
角色
，
数据
｝
＝
等待
加载
．
昂迪迪解雇
（
）
；
控制台
．
日志
（
“加载了!”
）
；
｝
异步的
presentLoadingWithOptions
（
）
｛
常数
加载
＝
等待
这
．
装载控制器
．
创造
（
｛
纺纱机
：
零
，
持续时间
：
5000
，
消息
：
“点击背景，提前解散……”
，
半透明的
：
真正的
，
cssClass
：
“自定义类自定义加载”
，
backdropDismiss
：
真正的
｝
）
；
等待
加载
．
现在
（
）
；
常数
｛
角色
，
数据
｝
＝
等待
加载
．
昂迪迪解雇
（
）
；
控制台
．
日志
（
'已解除与角色的加载：'
，
角色
）
；
｝
｝风格的位置
在Angular中，特定页面的CSS仅限于该页面的元素。即使可以从页面中显示加载
ion-loading
元素附加到当前页之外。这意味着任何自定义样式都需要放在全局样式表文件中。在离子角起动betway东盟体育app器中，这可能是
src/global.scss
文件，或者您可以通过
增加了
风格
内置选项
angular.json
．
异步的
函数
当前加载
（
）
｛
常数
加载
＝
文档
．
createElement
（
“离子负载”
）
；
加载
．
cssClass
＝
“my-custom-class”
；
加载
．
消息
＝
“请等待…”
；
加载
．
持续时间
＝
2000
；
文档
．
身体
．
列表末尾
（
加载
）
；
等待
加载
．
现在
（
）
；
常数
｛
角色
，
数据
｝
＝
等待
加载
．
昂迪迪解雇
（
）
；
控制台
．
日志
（
“加载了!”
）
；
｝
异步的
函数
presentLoadingWithOptions
（
）
｛
常数
加载
＝
文档
．
createElement
（
“离子负载”
）
；
加载
．
纺纱机
＝
零
；
加载
．
持续时间
＝
5000
；
加载
．
消息
＝
“点击背景，提前解散……”
；
加载
．
半透明的
＝
真正的
；
加载
．
cssClass
＝
“自定义类自定义加载”
；
加载
．
backdropDismiss
＝
真正的
；
文档
．
身体
．
列表末尾
（
加载
）
；
等待
加载
．
现在
（
）
；
常数
｛
角色
，
数据
｝
＝
等待
加载
．
昂迪迪解雇
（
）
；
控制台
．
日志
（
'已解除与角色的加载：'
，
角色
）
；
｝
/*使用装载钩*/
进口
反应
从…起
“反应”
；
进口
｛
IonButton
，
IonContent
，
伊恩佩奇
，
useIonLoading
｝
从…起
“@betway东盟体育appionic/react”
；
接口
LoadingProps
｛
｝
常数
加载示例
：
反应
．
足球俱乐部
<
LoadingProps
>
= () =>
｛
常数
［
现在
，
驳回
］
＝
useIonLoading
（
）
；
/***建议的解除方法是在“IonLoading”上使用“Dismise”属性*，但从“useIonLoading”返回的“Dismise”方法可用于更复杂的场景*/
返回
（
<
伊恩佩奇
>
<
IonContent
>
<
IonButton
扩大
＝
＂
块
＂
onClick
＝
｛
（
）
=>
｛
现在
（
｛
消息
：
“加载…”
，
持续时间
：
3000
｝
）
｝
｝
>
显示加载
IonButton
>
<
IonButton
扩大
＝
＂
块
＂
onClick
＝
｛
（
）
=>
现在
（
“装载”
，
2000
，
“点”
）
｝
>
使用参数显示加载
IonButton
>
IonContent
>
伊恩佩奇
>
）
；
｝
；
/*与IonLoading组件一起使用*/
进口
反应
，
｛
useState
｝
从…起
“反应”
；
进口
｛
IonLoading
，
IonButton
，
IonContent
｝
从…起
“@betway东盟体育appionic/react”
；
出口
常数
加载示例
：
反应
．
足球俱乐部
＝
（
）
=>
｛
常数
［
showLoading
，
固定负载
］
＝
useState
（
真正的
）
；
setTimeout
（
（
）
=>
｛
固定负载
（
假
）
；
｝
，
2000
）
；
返回
（
<
IonContent
>
<
IonButton
onClick
＝
｛
（
）
=>
固定负载
（
真正的
）
｝
>
显示加载
IonButton
>
<
IonLoading
cssClass
＝
＇
my-custom-class
＇
等参
＝
｛
showLoading
｝
昂迪迪解雇
＝
｛
（
）
=>
固定负载
（
假
）
｝
消息
＝
｛
“请等待…”
｝
持续时间
＝
｛
5000
｝
/>
IonContent
>
）
；
｝
；
进口
｛
组件
，
h
｝
从…起
“@stencil /核心”
；
进口
｛
装载控制器
｝
从…起
“@betway东盟体育appionic/core”
；
＠
组件
（
｛
标签
：
“加载示例”
，
样式URL
：
“loading-example.css”
｝
）
出口
类
加载示例
｛
异步的
当前加载
（
）
｛
常数
加载
＝
等待
装载控制器
．
创造
（
｛
cssClass
：
“my-custom-class”
，
消息
：
“请等待…”
，
持续时间
：
2000
｝
）
；
等待
加载
．
现在
（
）
；
常数
｛
角色
，
数据
｝
＝
等待
加载
．
昂迪迪解雇
（
）
；
控制台
．
日志
（
“加载了!”
，
角色
，
数据
）
；
｝
异步的
presentLoadingWithOptions
（
）
｛
常数
加载
＝
等待
装载控制器
．
创造
（
｛
纺纱机
：
零
，
持续时间
：
5000
，
消息
：
“点击背景，提前解散……”
，
半透明的
：
真正的
，
cssClass
：
“自定义类自定义加载”
，
backdropDismiss
：
真正的
｝
）
；
等待
加载
．
现在
（
）
；
常数
｛
角色
，
数据
｝
＝
等待
加载
．
昂迪迪解雇
（
）
；
控制台
．
日志
（
'已解除与角色的加载：'
，
角色
，
数据
）
；
｝
渲染
（
）
｛
返回
［
<
离子含量
>
<
ion-button
onClick
＝
｛
（
）
=>
这
．
当前加载
（
）
｝
>
当前负载
ion-button
>
<
ion-button
onClick
＝
｛
（
）
=>
这
．
presentLoadingWithOptions
（
）
｝
>
当前加载：选项
ion-button
>
离子含量
>
］
；
｝
｝
<
模板
>
<
ion-button
@点击
＝
＂
当前加载
＂
>
显示加载
ion-button
>
<
br
/>
<
ion-button
@点击
＝
＂
presentLoadingWithOptions
＂
>
显示加载
ion-button
>
模板
>
<
脚本
>
<
脚本
>
进口
｛
IonButton
，
装载控制器
｝
从…起
“@betway东盟体育appionic / vue”
；
进口
｛
defineComponent
｝
从…起
“vue”
；
出口
默认的
defineComponent
（
｛
道具
：
｛
超时
：
｛
类型
：
数量
，
默认的
：
1000
｝
，
｝
，
方法
：
｛
异步的
当前加载
（
）
｛
常数
加载
＝
等待
装载控制器
．
创造
（
｛
cssClass
：
“my-custom-class”
，
消息
：
“请等待…”
，
持续时间
：
这
．
超时
，
｝
）
；
等待
加载
．
现在
（
）
；
setTimeout
（
函数
（
）
｛
加载
．
驳回
（
）
｝
，
这
．
超时
）
；
｝
，
异步的
presentLoadingWithOptions
（
）
｛
常数
加载
＝
等待
装载控制器
．
创造
（
｛
纺纱机
：
零
，
持续时间
：
这
．
超时
，
消息
：
“点击背景，提前解散……”
，
半透明的
：
真正的
，
cssClass
：
“自定义类自定义加载”
，
backdropDismiss
：
真正的
｝
）
；
等待
加载
．
现在
（
）
；
setTimeout
（
函数
（
）
｛
加载
．
驳回
（
）
｝
，
这
．
超时
）
；
｝
，
｝
，
组件
：
｛
IonButton
｝
｝
）
；
脚本
>开发人员还可以在其模板中直接使用此组件：
<
模板
>
<
ion-button
@点击
＝
＂
setOpen(真正的)
＂
>
显示加载
ion-button
>
<
ion-loading
:是开放的
＝
＂
等间距
＂
cssClass
＝
＂
my-custom-class
＂
消息
＝
＂
请稍等…
＂
：持续时间
＝
＂
超时
＂
@didDismiss
＝
＂
setOpen（假）
＂
>
ion-loading
>
模板
>
<
脚本
>
进口
｛
IonLoading
，
IonButton
｝
从…起
“@betway东盟体育appionic / vue”
；
进口
｛
defineComponent
，
裁判
｝
从…起
“vue”
；
出口
默认的
defineComponent
（
｛
道具
：
｛
超时
：
｛
类型
：
数量
，
默认的
：
1000
｝
，
｝
，
组件
：
｛
IonLoading
，
IonButton
｝
，
设置
（
）
｛
常数
等间距
＝
裁判
（
假
）
；
常数
打开
＝
（
状态
：
布尔值
）
=>
等间距
．
价值
＝
状态
；
返回
｛
等间距
，
打开
｝
｝
｝
）
；
脚本
>性质
动画 |
|
|---|---|
| 描述 |
如果 |
| 属性 |
动画 |
| 类型 |
布尔值 |
| 默认的 |
真正的 |
backdropDismiss |
|
| 描述 |
如果 |
| 属性 |
背景解除 |
| 类型 |
布尔值 |
| 默认的 |
假 |
cssClass |
|
| 描述 |
用于自定义CSS的附加类。如果提供了多个类，它们应该用空格分隔。 |
| 属性 |
css类 |
| 类型 |
String | String [] | undefined |
持续时间 |
|
| 描述 |
关闭加载指示器之前等待的毫秒数。 |
| 属性 |
持续时间 |
| 类型 |
数量 |
| 默认的 |
0 |
enterAnimation |
|
| 描述 |
加载指示器显示时使用的动画。 |
| 类型 |
（（baseEl:any，opts？:any）=>动画）|未定义 |
htmlAttributes |
|
| 描述 |
要传递给加载程序的其他属性。 |
| 类型 |
加载属性|未定义 |
键盘闭合 |
|
| 描述 |
如果 |
| 属性 |
keyboard-close |
| 类型 |
布尔值 |
| 默认的 |
真正的 |
leaveAnimation |
|
| 描述 |
当加载指示符被取消时使用的动画。 |
| 类型 |
（（baseEl:any，opts？:any）=>动画）|未定义 |
消息 |
|
| 描述 |
要在加载指示器中显示的可选文本内容。 |
| 属性 |
消息 |
| 类型 |
betway东盟体育appIonicSafeString | string | undefined |
模式 |
|
| 描述 |
该模式确定要使用的平台样式。 |
| 属性 |
模式 |
| 类型 |
“ios”|“md” |
showBackdrop |
|
| 描述 |
如果 |
| 属性 |
show-backdrop |
| 类型 |
布尔值 |
| 默认的 |
真正的 |
纺纱机 |
|
| 描述 |
要显示的微调器的名称。 |
| 属性 |
纺纱机 |
| 类型 |
“气泡”|“圆”|“圆”|“新月”|“点”|“线”|“线小”|空|未定义 |
半透明的 |
|
| 描述 |
如果 |
| 属性 |
半透明的 |
| 类型 |
布尔值 |
| 默认的 |
假 |
事件
| 名称 | 描述 |
|---|---|
ionLoadingDidDismiss |
卸载完毕后排放。 |
ionLoadingDidPresent |
加载完成后发出。 |
IonLoading将解散 |
在装货结束前发出。 |
离子负载将出现 |
在加载之前发出。 |
方法
驳回 |
|
|---|---|
| 描述 |
取消加载覆盖后，它已经呈现。 |
| 签名 |
解雇(数据?:任何作用?：一串|undefined) => Promise |
昂迪迪解雇 |
|
| 描述 |
返回一个承诺，该承诺在加载确实解除时解析。 |
| 签名 |
onDidDismiss |
onWillDismiss |
|
| 描述 |
返回一个承诺，该承诺将在加载终止时解析。 |
| 签名 |
onWillDismiss |
现在 |
|
| 描述 |
在加载覆盖层创建后呈现它。 |
| 签名 |
礼物()= > < >无效承诺 |
CSS自定义属性
| 名称 | 描述 |
|---|---|
——backdrop-opacity |
背景的不透明性 |
——背景 |
加载对话框的背景 |
——高度 |
加载对话框的高度 |
--最大高度 |
加载对话框的最大高度 |
——max-width |
加载对话框的最大宽度 |
--最小高度 |
加载对话框的最小高度 |
——min-width |
加载对话框的最小宽度 |
——spinner-color |
加载微调器的颜色 |
——宽度 |
加载对话框的宽度 |