搜索文件 /

在反应中使用覆盖部件

对于离子betway东盟体育app反应,有两种技术可以用于显示覆盖组件,如模态,警报,动作表等。在本指南中,我们将覆盖它们。

覆盖钩子

从离子反应开始5.6,我betway东盟体育app们推出了新的反应钩,您可以用来控制显示和拆除叠加层。这些钩子提供了一种控制叠加的程序方法,以及在不需要状态管理系统的情况下使用离子页面外部的叠加方式的方法。betway东盟体育app

要使用其中一个叠加挂钩,请将挂钩导入要使用的叠加挂钩 @betway东盟体育app离子/反应 。例如,如果我们想使用警报叠加,我们导入 使用


              进口
             
              {
             使用
              }
             
              
             
              '@betway东盟体育app离子/反应'
              ;
复制 复制

挂钩返回数组,其中阵列中的第一个项目是呈现钩子的方法,第二项是解雇钩子的方法:


              Const.
             
              [
             Showalert.
              
             Hidealert.
              ]
             
              =
             
              使用
              
              的)
              ;
复制 复制

叠加通常会在用户与它们进行交互时忽略自己,因此您可能不需要使用DISPISS /隐藏方法。

要显示叠加,您可以使用本方法,我们破坏了名称 Showalert. 。该方法采用一组参数,该参数因每个覆盖而异,但通常可以采用简单的公共参数或对象来指定其他选项。


              Showalert.
              
              '你好!'
              
             
              [
              {
             文本
              
             
              '好的'
             
              }
              ]
              的)
复制 复制

为了 使用 ,第一个参数是要显示的消息,第二个参数是一个数组 AlertButtons. 要自定义警报将显示的按钮。

或者,您可以在AlertOptions Config对象中传递,以提供其他参数,例如CSS类以添加到标记,警报的标题,以及当警报被解雇时调用的回调:


              Showalert.
              
              {
             CSSCLASS.
              
             
              '我的CSS'
              
             标题
              
             
              '警报'
              
             信息
              
             
              '你好!'
              
             纽扣
              
             
              [
             
              '取消'
              
             
              {
             文本
              
             
              '好的'
              
             
              处理程序
              
             
              
              D.
              的)
             
              =>
             
              安慰
              
              日志
              
              'ok按下'
              的)
             
              }
              
             
              ]
              
             
              ondiddismiss.
              
             
              
              E.
              的)
             
              =>
             
              安慰
              
              日志
              
              '警戒解雇'
              的)
              
             
              }
              的)
复制 复制

覆盖挂钩,可显示其他自定义组件作为标记的一部分,例如 模数 约夏克布丁 初始化挂钩时,请参加几个附加参数。第一个参数是您希望叠加到显示的组件,第二个参数是在构造时要传递到组件的其他道具的对象:


              Const.
             
              [
             展示
              
             解雇
              ]
             
              =
             
              使用二极管
              
              
               {
              姓名
               }
              的)
             
              =>
             
                <
               div
               >
              你好
              {
             姓名
              }
              
                
               div
               >
              
             
              {
             姓名
              
             
              '戴夫'
             
              }
              的)
              ;
复制 复制

覆盖组件

也可以通过使用组件来显示覆盖层 @betway东盟体育app离子/反应 。组件采取 开了 如果当前正在显示覆盖层,则提供控制控制。什么时候 开了 从TRUE切换到FALSE(和VISE VESS),离子将打开/关闭覆盖物,使用适当的动画。betway东盟体育app您还可以将任何其他附加配置选项提供给叠加层的道具:


                <
                机器人
              
               开了
                =
                {
               Showalert.
                }
              
               信息
                =
                
               你好!
                
              
               纽扣
                =
                {
                [
                {
               文本
                
               
                '好的'
               
                }
                ]
                }
              
               ondiddismiss.
                =
                {
                
                的)
               
                =>
               
                setshowalert.
                
                错误的
                的)
                }
              
               />
复制 复制

以上, Showalert. 布尔是您申请提供的一张状态。

当覆盖物被驳回时,将绑定到 ondiddismiss. 回调并设置状态变量以指示叠加不再呈现。betway东盟体育app离子反应寻找变化 开了 准则来确定是否应显示覆盖物是否显示。

对于显示自定义组件的叠加,例如 模数 约夏克布丁 ,您将组件作为子于叠加组件提供:


                <
                离子二极管
              
               开了
                =
                {
               ShowModal.
                }
               >
                <
               div
               >
              你好!
                
               div
               >
                
                离子二极管
               >
复制 复制

覆盖组件仍然是显示叠加的有效方法,并且绝不是弃用方法。使用最适合您的应用程序的方法。

离子中的叠加文档betway东盟体育app

对于完整的文档并查看钩子和组件方法的使用示例,请访问离子中的每个叠加的文档页面:betway东盟体育app

Baidu