搜索文件 /
阴影

离子纹波效果

纹波效果组件添加了 材料设计墨水纹波相互作用效果 。该组件只能在其中使用 并且可以添加到任何组件。

值得注意的是,父母应该有 相对定位 因为纹波效果绝对定位,并且将覆盖相对定位的最近的父母。还应给出父元素 离子可激活 类,讲述元素可点击的纹波效果。

默认类型, “有界” ,将从单击位置向外扩展纹波效果。要添加始终从元素中心开始的纹波效果并在圆圈中展开,请添加 “无限制” 类型。它建议添加 溢出:隐藏 到父元素以避免云溢出的纹波,尤其是无限的纹波。

用法


                  <
                 离子应用程序
                 >
               
                  <
                 离子内容
                 >
               
                  <
                 div
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
               一个普遍存在的涟漪效应
                  <
                 离子纹波效果
                 >
                  
                 离子纹波效果
                 >
               
                  
                 div
                 >
               
                  <
                 按钮
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
               一个有界纹波效果的按钮
                  <
                 离子纹波效果
                 >
                  
                 离子纹波效果
                 >
               
                  
                 按钮
                 >
               
                  <
                 div
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
               一个普通的涟漪效应
                  <
                 离子纹波效果
                
                 类型
                  =
                  
                 无界限
                  
                 >
                  
                 离子纹波效果
                 >
               
                  
                 div
                 >
               
                  <
                 按钮
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
               一个无限的纹波效果的按钮
                  <
                 离子纹波效果
                
                 类型
                  =
                  
                 无界限
                  
                 >
                  
                 离子纹波效果
                 >
               
                  
                 按钮
                 >
               
                  
                 离子内容
                 >
               
                  
                 离子应用程序
                 >
复制 复制

                。重量级父母
               
                {
               
                位置
                
               相对的
                ;
               
                溢出
                
               
                ;
               
                }
复制 复制

                  <
                 离子应用程序
                 >
               
                  <
                 离子内容
                 >
               
                  <
                 div
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
               一个普遍存在的涟漪效应
                  <
                 离子纹波效果
                 >
                  
                 离子纹波效果
                 >
               
                  
                 div
                 >
               
                  <
                 按钮
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
               一个有界纹波效果的按钮
                  <
                 离子纹波效果
                 >
                  
                 离子纹波效果
                 >
               
                  
                 按钮
                 >
               
                  <
                 div
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
               一个普通的涟漪效应
                  <
                 离子纹波效果
                
                 类型
                  =
                  
                 无界限
                  
                 >
                  
                 离子纹波效果
                 >
               
                  
                 div
                 >
               
                  <
                 按钮
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
               一个无限的纹波效果的按钮
                  <
                 离子纹波效果
                
                 类型
                  =
                  
                 无界限
                  
                 >
                  
                 离子纹波效果
                 >
               
                  
                 按钮
                 >
               
                  
                 离子内容
                 >
               
                  
                 离子应用程序
                 >
复制 复制

                。重量级父母
               
                {
               
                位置
                
               相对的
                ;
               
                溢出
                
               
                ;
               
                }
复制 复制

                进口
               反应
                
               
                '反应'
                ;
               
                进口
               
                {
               Ionapp.
                
               离子联系
                
               Ionrippleeffect.
                }
               
                
               
                '@betway东盟体育app离子/反应'
                ;
               
                进口
               
                './rippleeffectexample.css'
                ;
               
                出口
               
                Const.
               rippleexample.
                
               反应
                
                FC.
               
                =
               
                
                的)
               
                =>
               
                
               
                  <
                  Ionapp.
                 >
                
                  <
                  离子联系
                 >
                
                  <
                 div
                
                 班级名称
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
                一个普遍存在的涟漪效应
                  <
                  Ionrippleeffect.
                 >
                  
                  Ionrippleeffect.
                 >
                
                  
                 div
                 >
                
                  <
                 按钮
                
                 班级名称
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
                一个有界纹波效果的按钮
                  <
                  Ionrippleeffect.
                 >
                  
                  Ionrippleeffect.
                 >
                
                  
                 按钮
                 >
                
                  <
                 div
                
                 班级名称
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
                一个普通的涟漪效应
                  <
                  Ionrippleeffect.
                
                 类型
                  =
                  
                 无界限
                  
                 >
                  
                  Ionrippleeffect.
                 >
                
                  
                 div
                 >
                
                  <
                 按钮
                
                 班级名称
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
                一个无限的纹波效果的按钮
                  <
                  Ionrippleeffect.
                
                 类型
                  =
                  
                 无界限
                  
                 >
                  
                  Ionrippleeffect.
                 >
                
                  
                 按钮
                 >
                
                  
                  离子联系
                 >
                
                  
                  Ionapp.
                 >
               
                的)
                ;
复制 复制

                。重量级父母
               
                {
               
                位置
                
               相对的
                ;
               
                溢出
                
               
                ;
               
                }
复制 复制

                进口
               
                {
               零件
                
               H
                }
               
                
               
                '@模板/核心'
                ;
               @
                零件
                
                {
               标签
                
               
                '涟漪 - 效果 - 举例'
                
               styleurl.
                
               
                '涟漪 - 效果 -  example.css'
               
                }
                的)
               
                出口
               
                班级
               
                rippleeffectexample.
               
                {
               
                使成为
                
                的)
               
                {
               
                返回
               
                [
               
                  <
                 离子应用程序
                 >
                
                  <
                 离子内容
                 >
                
                  <
                 div
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
                一个普遍存在的涟漪效应
                  <
                 离子纹波效果
                 >
                  
                 离子纹波效果
                 >
                
                  
                 div
                 >
                
                  <
                 按钮
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
                一个有界纹波效果的按钮
                  <
                 离子纹波效果
                 >
                  
                 离子纹波效果
                 >
                
                  
                 按钮
                 >
                
                  <
                 div
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
                一个普通的涟漪效应
                  <
                 离子纹波效果
                
                 类型
                  =
                  
                 无界限
                  
                 >
                  
                 离子纹波效果
                 >
                
                  
                 div
                 >
                
                  <
                 按钮
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
                一个无限的纹波效果的按钮
                  <
                 离子纹波效果
                
                 类型
                  =
                  
                 无界限
                  
                 >
                  
                 离子纹波效果
                 >
                
                  
                 按钮
                 >
                
                  
                 离子内容
                 >
                
                  
                 离子应用程序
                 >
               
                ]
                ;
               
                }
               
                }
复制 复制

                。重量级父母
               
                {
               
                位置
                
               相对的
                ;
               
                溢出
                
               
                ;
               
                }
复制 复制

                  <
                 模板
                 >
               
                  <
                 离子应用程序
                 >
               
                  <
                 离子内容
                 >
               
                  <
                 div
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
               一个普遍存在的涟漪效应
                  <
                 离子纹波效果
                 >
                  
                 离子纹波效果
                 >
               
                  
                 div
                 >
               
                  <
                 按钮
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
               一个有界纹波效果的按钮
                  <
                 离子纹波效果
                 >
                  
                 离子纹波效果
                 >
               
                  
                 按钮
                 >
               
                  <
                 div
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
               一个普通的涟漪效应
                  <
                 离子纹波效果
                
                 类型
                  =
                  
                 无界限
                  
                 >
                  
                 离子纹波效果
                 >
               
                  
                 div
                 >
               
                  <
                 按钮
                
                 班级
                  =
                  
                 离子可激活的波纹 - 父
                  
                 >
               一个无限的纹波效果的按钮
                  <
                 离子纹波效果
                
                 类型
                  =
                  
                 无界限
                  
                 >
                  
                 离子纹波效果
                 >
               
                  
                 按钮
                 >
               
                  
                 离子内容
                 >
               
                  
                 离子应用程序
                 >
               
                  
                 模板
                 >
               
                  <
                 风格
                 >
                 
                  。重量级父母
                 
                  {
                 
                  位置
                  
                 相对的
                  ;
                 
                  溢出
                  
                 
                  ;
                 
                  }
                 
                  
                 风格
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  {
                 Ionapp.
                  
                 离子联系
                  
                 Ionrippleeffect.
                  }
                 
                  
                 
                  '@betway东盟体育app ionic / vue'
                  ;
                 
                  进口
                 
                  {
                 绝缘组分
                  }
                 
                  
                 
                  'vue'
                  ;
                 
                  出口
                 
                  默认
                 
                  绝缘组分
                  
                  {
                 成分
                  
                 
                  {
                 Ionapp.
                  
                 离子联系
                  
                 Ionrippleeffect.
                  }
                 
                  }
                  的)
                  ;
                 
                  
                 脚本
                 >
复制 复制

特性

类型

描述

设置纹波效果的类型:

  • 有限的:纹波效果从用户的单击位置扩展
  • 无界限:纹波效果从按钮的中心扩展并溢出容器。

注意:界限纹波的曲面应将溢出属性设置为隐藏,而无限制的纹波的曲面应使其设置为可见。

属性 类型
类型 “有界”|“无限制”
默认 '有界'

方法

附加联系方式

描述

将纹波效果添加到父元素。

签名 附加提示(x:number,y:number)=> promise <()=> void>
Baidu