搜索文件 /
范围

离子装载

可用于在阻止用户交互的同时指示活动的覆盖层。加载指示器出现在应用程序的内容之上,并且可以由应用程序解雇以恢复与应用程序的用户交互。它包括一个可选的背景,可以通过设置禁用 showbackdrop:false. 创造时。

驳回

通过传递毫秒次数以显示它的特定时间,可以在特定时间内自动解雇加载指示器 期间 加载选项。要在创建后解雇装载指示,请致电 解雇() 加载实例的方法。这 ondiddismiss. 可以调用函数以在解雇加载指示后执行操作。

定制

加载使用范围封装,这意味着它将通过在运行时附加类附加等级将其样式自动自动范围。在CSS中覆盖范围选择器需要一个 特异性更高 选择器。

我们建议通过自定义类 CSSCLASS. 在里面 创建 方法并使用该方法将自定义样式添加到主机和内部元素。此属性还可以接受由空格分隔的多个类。查看<模版-route-link class="hydrated" c-id="146.55.5.5" s-id="157"> 用法 有关如何使用类的示例的部分 CSSCLASS.


              / *不起作用 - 不具体* /
             
              离子装载
             
              {
             
              颜色
              
             绿色
              ;
             
              }
             
              / *工作 - 在CSSCLASS中传递“My-Custom-class”以增加特定性* /
             
              .my-定制课程
             
              {
             
              颜色
              
             绿色
              ;
             
              }
复制 复制

任何定义的<模版-route-link class="hydrated" c-id="146.109.5.1" s-id="159"> CSS自定义属性 可用于在不需要目标单个元素的情况下拟合加载:


              .my-定制课程
             
              {
             
              - 背景
              
             #222
              ;
             
              - 开采 - 颜色
              
             #fff.
              ;
             
              颜色
              
             #fff.
              ;
             
              }
复制 复制

如果您正在构建IONIC Angular应用程betway东盟体育app序,则需要将样式添加到全局样式表文件中。读<模版-route-link class="hydrated" c-id="146.155.6.1" s-id="161"> 风格安排 在下面的角度部分以获取更多信息。

界面

loadingoptions.


              界面
             
              loadingoptions.
             
              {
             旋转器
              
              
             Spinnertypes.
              |
             
              空值
              ;
             信息
              
              
             
              细绳
             
              |
             betway东盟体育appIonicsafestring.
              ;
             CSSCLASS.
              
              
             
              细绳
             
              |
             
              细绳
              [
              ]
              ;
             ShowBackDrop.
              
              
             
              布尔
              ;
             期间
              
              
             
              数字
              ;
             半透明
              
              
             
              布尔
              ;
             动画
              
              
             
              布尔
              ;
             backdropdismiss.
              
              
             
              布尔
              ;
             模式
              
              
             模式
              ;
             键盘关闭
              
              
             
              布尔
              ;
             ID
              
              
             
              细绳
              ;
             htmlattributes.
              
              
             loadingAttributes.
              ;
             肠炎
              
              
             AmimationBuilder.
              ;
             迎接
              
              
             AmimationBuilder.
              ;
             
              }
复制 复制

loadingAttributes.


              界面
             
              loadingAttributes.
             
              延伸
             
              JSXBase.
               
              htmlattributes.
              <
             htmlelement.
              >
             
              {
              }
复制 复制

用法


                进口
               
                {
               零件
                }
               
                
               
                '@ Angular / Core'
                ;
               
                进口
               
                {
               加载控制器
                }
               
                
               
                '@betway东盟体育app离子/棱角'
                ;
               @
                零件
                
                {
               选择器
                
               
                '加载 - 例'
                
               templateURL.
                
               
                '加载-example.html'
                
               样式堡垒
                
               
                [
                './loading-example.css'
                ]
               
                }
                的)
               
                出口
               
                班级
               
                loadingexample.
               
                {
               
                构造函数
                
                 民众
                加载控制器
                 
                加载控制器
                的)
               
                {
                }
               
                异步
               
                呈现
                
                的)
               
                {
               
                Const.
               装载
                =
               
                等待
               
                
                
               加载控制器
                
                创建
                
                {
               CSSCLASS.
                
               
                '我的自定义班'
                
               信息
                
               
                '请稍等...'
                
               期间
                
               
                2000年
               
                }
                的)
                ;
               
                等待
               装载
                
                展示
                
                的)
                ;
               
                Const.
               
                {
               角色
                
               数据
                }
               
                =
               
                等待
               装载
                
                ondiddismiss.
                
                的)
                ;
               
                安慰
                
                日志
                
                '装货被驳回!'
                的)
                ;
               
                }
               
                异步
               
                kidellingingwithoptions.
                
                的)
               
                {
               
                Const.
               装载
                =
               
                等待
               
                
                
               加载控制器
                
                创建
                
                {
               旋转器
                
               
                空值
                
               期间
                
               
                5000
                
               信息
                
               
                '点击背景下解雇......'
                
               半透明
                
               
                真的
                
               CSSCLASS.
                
               
                '自定义类自定义加载'
                
               backdropdismiss.
                
               
                真的
               
                }
                的)
                ;
               
                等待
               装载
                
                展示
                
                的)
                ;
               
                Const.
               
                {
               角色
                
               数据
                }
               
                =
               
                等待
               装载
                
                ondiddismiss.
                
                的)
                ;
               
                安慰
                
                日志
                
                '加载驳回了角色:'
                
               角色
                的)
                ;
               
                }
               
                }
复制 复制

风格安排

在Angular中,特定页面的CSS仅适用于该页面的元素。即使加载可以从页面内部呈现, 离子装载 元素附加在当前页面之外。这意味着任何自定义样式都需要进入全局样式表文件。在离子角度启betway东盟体育app动器中,这可以是 src / global.scs. 文件或您可以注册新的全局样式文件 加到了 风格 构建选项 Angular.Json.


                异步
               
                功能
               
                呈现
                
                的)
               
                {
               
                Const.
               装载
                =
               文档
                
                牧马赛
                
                '离子装载'
                的)
                ;
               装载
                
               CSSCLASS.
                =
               
                '我的自定义班'
                ;
               装载
                
               信息
                =
               
                '请稍等...'
                ;
               装载
                
               期间
                =
               
                2000年
                ;
               文档
                
               身体
                
                阑尾
                
               装载
                的)
                ;
               
                等待
               装载
                
                展示
                
                的)
                ;
               
                Const.
               
                {
               角色
                
               数据
                }
               
                =
               
                等待
               装载
                
                ondiddismiss.
                
                的)
                ;
               安慰
                
                日志
                
                '装货被驳回!'
                的)
                ;
               
                }
               
                异步
               
                功能
               
                kidellingingwithoptions.
                
                的)
               
                {
               
                Const.
               装载
                =
               文档
                
                牧马赛
                
                '离子装载'
                的)
                ;
               装载
                
               旋转器
                =
               
                空值
                ;
               装载
                
               期间
                =
               
                5000
                ;
               装载
                
               信息
                =
               
                '点击背景下解雇......'
                ;
               装载
                
               半透明
                =
               
                真的
                ;
               装载
                
               CSSCLASS.
                =
               
                '自定义类自定义加载'
                ;
               装载
                
               backdropdismiss.
                =
               
                真的
                ;
               文档
                
               身体
                
                阑尾
                
               装载
                的)
                ;
               
                等待
               装载
                
                展示
                
                的)
                ;
               
                Const.
               
                {
               角色
                
               数据
                }
               
                =
               
                等待
               装载
                
                ondiddismiss.
                
                的)
                ;
               安慰
                
                日志
                
                '加载驳回了角色:'
                
               角色
                的)
                ;
               
                }
复制 复制

                / *使用使用永磁钩* /
               
                进口
               反应
                
               
                '反应'
                ;
               
                进口
               
                {
               IonButton.
                
               离子联系
                
               离子页面
                
               使用
                }
               
                
               
                '@betway东盟体育app离子/反应'
                ;
               
                界面
               
                加载付费
               
                {
                }
               
                Const.
               loadingexample.
                
               反应
                
                FC.
                  <
                  加载付费
                 >
                =()=>
                {
               
                Const.
               
                [
               展示
                
               解雇
                ]
               
                =
               
                使用
                
                的)
                ;
               
                / ** *推荐的驳回方式是使用“解雇”属性*在“离子载入”中,但是从“使用”返回“返回”使用“拒绝”方法(FuningLoading` *)可用于更复杂的方案。* /
               
                返回
               
                
               
                  <
                  离子页面
                 >
                
                  <
                  离子联系
                 >
                
                  <
                  IonButton.
                
                 扩张
                  =
                  
                 堵塞
                  
                
                 onclick.
                  =
                  {
                  
                  的)
                 
                  =>
                 
                  {
                 
                  展示
                  
                  {
                 信息
                  
                 
                  '加载...'
                  
                 期间
                  
                 
                  3000.
                 
                  }
                  的)
                 
                  }
                  }
                
                 >
                展示装载
                  
                  IonButton.
                 >
                
                  <
                  IonButton.
                
                 扩张
                  =
                  
                 堵塞
                  
                
                 onclick.
                  =
                  {
                  
                  的)
                 
                  =>
                 
                  展示
                  
                  '加载'
                  
                 
                  2000年
                  
                 
                  'dots'
                  的)
                  }
                
                 >
                使用Params显示Loading
                  
                  IonButton.
                 >
                
                  
                  离子联系
                 >
                
                  
                  离子页面
                 >
               
                的)
                ;
               
                }
                ;
复制 复制

                / *使用离子加载组件* /
               
                进口
               反应
                
               
                {
               useestate.
                }
               
                
               
                '反应'
                ;
               
                进口
               
                {
               离子加载
                
               IonButton.
                
               离子联系
                }
               
                
               
                '@betway东盟体育app离子/反应'
                ;
               
                出口
               
                Const.
               loadingexample.
                
               反应
                
                FC.
               
                =
               
                
                的)
               
                =>
               
                {
               
                Const.
               
                [
               showloving.
                
               setShowloading.
                ]
               
                =
               
                useestate.
                
                真的
                的)
                ;
               
                索取
                
                
                的)
               
                =>
               
                {
               
                setShowloading.
                
                错误的
                的)
                ;
               
                }
                
               
                2000年
                的)
                ;
               
                返回
               
                
               
                  <
                  离子联系
                 >
                
                  <
                  IonButton.
                
                 onclick.
                  =
                  {
                  
                  的)
                 
                  =>
                 
                  setShowloading.
                  
                  真的
                  的)
                  }
                 >
                展示装载
                  
                  IonButton.
                 >
                
                  <
                  离子加载
                
                 CSSCLASS.
                  =
                  '
                 我的定制课程
                  '
                
                 开了
                  =
                  {
                 showloving.
                  }
                
                 ondiddismiss.
                  =
                  {
                  
                  的)
                 
                  =>
                 
                  setShowloading.
                  
                  错误的
                  的)
                  }
                
                 信息
                  =
                  {
                  '请稍等...'
                  }
                
                 期间
                  =
                  {
                  5000
                  }
                
                 />
                
                  
                  离子联系
                 >
               
                的)
                ;
               
                }
                ;
复制 复制

                进口
               
                {
               零件
                
               H
                }
               
                
               
                '@模板/核心'
                ;
               
                进口
               
                {
               加载控制器
                }
               
                
               
                '@betway东盟体育app离子/核心'
                ;
               @
                零件
                
                {
               标签
                
               
                '加载 - 例'
                
               styleurl.
                
               
                '加载-example.css'
               
                }
                的)
               
                出口
               
                班级
               
                loadingexample.
               
                {
               
                异步
               
                呈现
                
                的)
               
                {
               
                Const.
               装载
                =
               
                等待
               加载控制器
                
                创建
                
                {
               CSSCLASS.
                
               
                '我的自定义班'
                
               信息
                
               
                '请稍等...'
                
               期间
                
               
                2000年
               
                }
                的)
                ;
               
                等待
               装载
                
                展示
                
                的)
                ;
               
                Const.
               
                {
               角色
                
               数据
                }
               
                =
               
                等待
               装载
                
                ondiddismiss.
                
                的)
                ;
               
                安慰
                
                日志
                
                '装货被驳回!'
                
               角色
                
               数据
                的)
                ;
               
                }
               
                异步
               
                kidellingingwithoptions.
                
                的)
               
                {
               
                Const.
               装载
                =
               
                等待
               加载控制器
                
                创建
                
                {
               旋转器
                
               
                空值
                
               期间
                
               
                5000
                
               信息
                
               
                '点击背景下解雇......'
                
               半透明
                
               
                真的
                
               CSSCLASS.
                
               
                '自定义类自定义加载'
                
               backdropdismiss.
                
               
                真的
               
                }
                的)
                ;
               
                等待
               装载
                
                展示
                
                的)
                ;
               
                Const.
               
                {
               角色
                
               数据
                }
               
                =
               
                等待
               装载
                
                ondiddismiss.
                
                的)
                ;
               
                安慰
                
                日志
                
                '加载驳回了角色:'
                
               角色
                
               数据
                的)
                ;
               
                }
               
                使成为
                
                的)
               
                {
               
                返回
               
                [
               
                  <
                 离子内容
                 >
                
                  <
                 离子按钮
                
                 onclick.
                  =
                  {
                  
                  的)
                 
                  =>
                 
                  
                  
                  呈现
                  
                  的)
                  }
                 >
                当前装载
                  
                 离子按钮
                 >
                
                  <
                 离子按钮
                
                 onclick.
                  =
                  {
                  
                  的)
                 
                  =>
                 
                  
                  
                  kidellingingwithoptions.
                  
                  的)
                  }
                 >
                当前装载:选项
                  
                 离子按钮
                 >
                
                  
                 离子内容
                 >
               
                ]
                ;
               
                }
               
                }
复制 复制

                  <
                 模板
                 >
               
                  <
                 离子按钮
                
                 @点击
                  =
                  
                 呈现
                  
                 >
               展示装载
                  
                 离子按钮
                 >
               
                  <
                 布鲁斯
                
                 />
               
                  <
                 离子按钮
                
                 @点击
                  =
                  
                 kidellingingwithoptions.
                  
                 >
               展示装载
                  
                 离子按钮
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  <
                 脚本
                  >
                 
                  进口
                 
                  {
                 IonButton.
                  
                 加载控制器
                  }
                 
                  
                 
                  '@betway东盟体育app ionic / vue'
                  ;
                 
                  进口
                 
                  {
                 绝缘组分
                  }
                 
                  
                 
                  'vue'
                  ;
                 
                  出口
                 
                  默认
                 
                  绝缘组分
                  
                  {
                 道具
                  
                 
                  {
                 暂停
                  
                 
                  {
                 类型
                  
                 数字
                  
                 
                  默认
                  
                 
                  1000
                 
                  }
                  
                 
                  }
                  
                 方法
                  
                 
                  {
                 
                  异步
                 
                  呈现
                  
                  的)
                 
                  {
                 
                  Const.
                 装载
                  =
                 
                  等待
                 加载控制器
                  
                  创建
                  
                  {
                 CSSCLASS.
                  
                 
                  '我的自定义班'
                  
                 信息
                  
                 
                  '请稍等...'
                  
                 期间
                  
                 
                  
                  
                 暂停
                  
                 
                  }
                  的)
                  ;
                 
                  等待
                 装载
                  
                  展示
                  
                  的)
                  ;
                 
                  索取
                  
                  功能
                  
                  的)
                 
                  {
                 装载
                  
                  解雇
                  
                  的)
                 
                  }
                  
                 
                  
                  
                 暂停
                  的)
                  ;
                 
                  }
                  
                 
                  异步
                 
                  kidellingingwithoptions.
                  
                  的)
                 
                  {
                 
                  Const.
                 装载
                  =
                 
                  等待
                 加载控制器
                  
                  创建
                  
                  {
                 旋转器
                  
                 
                  空值
                  
                 期间
                  
                 
                  
                  
                 暂停
                  
                 信息
                  
                 
                  '点击背景下解雇......'
                  
                 半透明
                  
                 
                  真的
                  
                 CSSCLASS.
                  
                 
                  '自定义类自定义加载'
                  
                 backdropdismiss.
                  
                 
                  真的
                 
                  }
                  的)
                  ;
                 
                  等待
                 装载
                  
                  展示
                  
                  的)
                  ;
                 
                  索取
                  
                  功能
                  
                  的)
                 
                  {
                 装载
                  
                  解雇
                  
                  的)
                 
                  }
                  
                 
                  
                  
                 暂停
                  的)
                  ;
                 
                  }
                  
                 
                  }
                  
                 成分
                  
                 
                  {
                 IonButton.
                  }
                 
                  }
                  的)
                  ;
                 
                  
                 脚本
                 >
复制 复制

开发人员还可以直接在其模板中使用此组件:


                  <
                 模板
                 >
               
                  <
                 离子按钮
                
                 @点击
                  =
                  
                 Setopen(真实)
                  
                 >
               展示装载
                  
                 离子按钮
                 >
               
                  <
                 离子装载
                
                 :开了
                  =
                  
                 Isopenref.
                  
                
                 CSSCLASS.
                  =
                  
                 我的定制课程
                  
                
                 信息
                  =
                  
                 请稍等...
                  
                
                 :期间
                  =
                  
                 暂停
                  
                
                 @diddismiss.
                  =
                  
                 setopen(false)
                  
                
                 >
               
                  
                 离子装载
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  {
                 离子加载
                  
                 IonButton.
                  }
                 
                  
                 
                  '@betway东盟体育app ionic / vue'
                  ;
                 
                  进口
                 
                  {
                 绝缘组分
                  
                 裁判
                  }
                 
                  
                 
                  'vue'
                  ;
                 
                  出口
                 
                  默认
                 
                  绝缘组分
                  
                  {
                 道具
                  
                 
                  {
                 暂停
                  
                 
                  {
                 类型
                  
                 数字
                  
                 
                  默认
                  
                 
                  1000
                 
                  }
                  
                 
                  }
                  
                 成分
                  
                 
                  {
                 离子加载
                  
                 IonButton.
                  }
                  
                 
                  设置
                  
                  的)
                 
                  {
                 
                  Const.
                 Isopenref.
                  =
                 
                  裁判
                  
                  错误的
                  的)
                  ;
                 
                  Const.
                 
                  Setopen.
                 
                  =
                 
                  
                  状态
                   
                  布尔
                  的)
                 
                  =>
                 Isopenref.
                  
                 价值
                  =
                 状态
                  ;
                 
                  返回
                 
                  {
                 Isopenref.
                  
                 Setopen.
                  }
                 
                  }
                 
                  }
                  的)
                  ;
                 
                  
                 脚本
                 >
复制 复制

特性

动画

描述

如果真的,加载指示灯将为动画。

属性 动画
类型 布尔
默认 真的

backdropdismiss.

描述

如果真的,单击后面时,加载指示灯将被解雇。

属性 背面解雇
类型 布尔
默认 错误的

CSSCLASS.

描述

申请自定义CSS的其他类。如果提供多个​​类,则应通过空格分隔。

属性 CSS-Class.
类型 字符串|字符串[] |不明确的

期间

描述

在解雇装载指示之前等待等待的毫秒数。

属性 期间
类型 数字
默认 0.

肠炎

描述

呈现加载指示灯时使用动画。

类型 ((Bibel:任何,选择?:Any)=>动画)|不明确的

htmlattributes.

描述

要传递给加载器的其他属性。

类型 loadingAttributes |不明确的

键盘关闭

描述

如果真的,键盘将在呈现叠加时自动拒收。

属性 键盘 - 关闭
类型 布尔
默认 真的

迎接

描述

装入指示器被解雇时使用动画。

类型 ((Bibel:任何,选择?:Any)=>动画)|不明确的

信息

描述

可选的文本内容以在加载指示器中显示。

属性 信息
类型 betway东盟体育appIonicsafestring |字符串|不明确的

模式

描述

该模式确定要使用的平台样式。

属性 模式
类型 “ios”|“MD”

ShowBackDrop.

描述

如果真的,将显示在装载指示后面的背景。

属性 展示背景
类型 布尔
默认 真的

旋转器

描述

显示的旋转器的名称。

属性 旋转器
类型 “泡泡”|“圈子”|“圆形”|“新月”|“点”|“线条”|“线条 - 小”|null |不明确的

半透明

描述

如果真的,装载指示器将是半透明的。仅适用模式时“ios”和设备支持背景过滤器

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

事件

姓名 描述
IonloadingDiddismiss. 装载后发出。
IonloadingDidpresent 装载后发出。
IonloadWilldismiss. 在装载后发出。
离子负载瓦尔普雷斯 在装载之前发出。

方法

解雇

描述

在呈现后解散装载叠加层。

签名 解雇(数据?:任何,角色?:String |未定义)=> promise

ondiddismiss.

描述

返回当加载拒收时解决的承诺。

签名 ondiddismiss ()=> promise >

onwilldismiss.

描述

返回加载将解除时解决的承诺。

签名 onwilldismiss ()=> promise >

展示

描述

在创建后呈现加载叠加层。

签名 呈现()=>承诺

CSS自定义属性

姓名 描述
- 覆盖透明度 背景的不透明性
- 背景 加载对话框的背景
- 高度 加载对话的高度
- 最大高度 加载对话框的最大高度
- max-width. 加载对话框的最大宽度
- 米高 加载对话框的最小高度
- 宽度 加载对话框的最小宽度
- 开采 - 颜色 装载旋转器的颜色
- 宽度 加载对话框的宽度
查看来源
Baidu