搜索文档 /
作用域

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
类型 布尔值
默认的 真正的

纺纱机

描述

要显示的微调器的名称。

属性 纺纱机
类型 “气泡”|“圆”|“圆”|“新月”|“点”|“线”|“线小”|空|未定义

半透明的

描述

如果真正的,装载指示器将是半透明的。仅当模式为时适用“ios”并且设备支持backdrop-filter

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

事件

名称 描述
ionLoadingDidDismiss 卸载完毕后排放。
ionLoadingDidPresent 加载完成后发出。
IonLoading将解散 在装货结束前发出。
离子负载将出现 在加载之前发出。

方法

驳回

描述

取消加载覆盖后,它已经呈现。

签名 解雇(数据?:任何作用?:一串|undefined) => Promise

昂迪迪解雇

描述

返回一个承诺,该承诺在加载确实解除时解析。

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

onWillDismiss

描述

返回一个承诺,该承诺将在加载终止时解析。

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

现在

描述

在加载覆盖层创建后呈现它。

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

CSS自定义属性

名称 描述
——backdrop-opacity 背景的不透明性
——背景 加载对话框的背景
——高度 加载对话框的高度
--最大高度 加载对话框的最大高度
——max-width 加载对话框的最大宽度
--最小高度 加载对话框的最小高度
——min-width 加载对话框的最小宽度
——spinner-color 加载微调器的颜色
——宽度 加载对话框的宽度
查看源代码
Baidu