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 |
加载微调器的颜色 |
——宽度 |
加载对话框的宽度 |